جوييري ماوس حدث واحد مع mouseover (fadein و fadeout)

StackOverflow https://stackoverflow.com/questions/1911719

سؤال

لذلك أنا أحاول أن أجعل div المحتوى 1. fadein عندما أذهب مع الماوس فوق div logo1., المحتوى 1. يجب أن تتلاشى عندما يكون الماوس الخاص بي logo1. أوه ومحتوى DIG لديه رؤية: مخفية على CSS. ينطبق الشيء نفسه على logo2 3 و 4

لقد جربت هذا الرمز لكنه لم يعمل بالنسبة لي (لم أضيف fadeout لأنني لا أعرف من أين أضيفه بعد أن استخدمت fadein)

$(document).ready(function(){ 
    $("logo1, logo2, logo3, logo4").one('mouseover', function(){
    $("logo1").fadeIn({"content1"}, "slow");
    $("logo2").fadeIn({"content2"}, "slow");
    $("logo3").fadeIn({"content3"}, "slow");
    $("logo4").fadeIn({"content4"}, "slow");
    $("content1, content2, content3, content4").mouseout('fadeout');
 });

ما الخطأ في قانون بلدي؟ هل هناك طريقة أسهل لعمل هذا الشيء؟ هل يمكن القيام به مع حدث واحد؟

تعديل:

إليك HTML Tegeril

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>test</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/mouseover.js'></script>
</head>

<body>
    <div id="container">
        <div class="logo"></div>
        <div class="stripes"></div>
        <div class="button_info"></div>
        <div class="button_contact"></div>
        <div class="logo1"></div>
        <div class="logo2"></div>
        <div class="logo3"></div>
        <div class="logo4"></div>
        <div class="content1"></div>
        <div class="content2"></div>
        <div class="content3"></div>
        <div class="content4"></div>
    </div>
</body>
</html>

جافا سكريبت بت

$(document).ready(function(){ 

$(".logo1").hover(function() { 
    $(".content1").fadeIn("slow");
}, function() {
    $(".content1").fadeOut("slow");
});
$(".logo2").hover(function() { 
    $(".content2").fadeIn("slow");
}, function() {
    $(".content2").fadeOut("slow");
});
$(".logo3").hover(function() { 
    $(".content3").fadeIn("slow");
}, function() {
    $(".content3").fadeOut("slow");
});
$(".logo4").hover(function() { 
    $(".content4").fadeIn("slow");
}, function() {
    $(".content4").fadeOut("slow");
});
});

و CSS.

body{
    margin: 0;
    padding: 0;
    text-align: center;
    background-image:url(../images/bg.png);
    background-repeat:repeat;
}

#container{
    background-image:url(../images/bg.png);
    text-align: left;
    margin: auto;
    width: 939px;
    height: 570px;
    top:41px;
    background-repeat:repeat;
    position:relative;
}

.logo{
    background-image:url(../images/logo.png);
    width: 345px;
    height: 82px;
    position:absolute;
}

.stripes{
    background-image:url(../images/stripes.png);
    background-repeat:repeat-x;
    width:939px;
    height:5px;
    position:absolute;
    top:97px;
    left:0px;
}

.button_info{
    background-image:url(../images/button_info.png);
    width: 98px;
    height: 31px;
    position:absolute;
    top:114px;
    left: 0px;
}

.button_contact{
    background-image:url(../images/button_contact.png);
    width: 211px;
    height: 35px;
    position:absolute;
    top:114px;
    right:0px;

}
.logo1{
    background-image:url(../images/logo_blue.png);
    background-repeat:repeat;
    width: 231px;
    height: 91px;
    position:absolute;
    bottom: 322px;

}
.logo2{
    background-image:url(../images/logo_green.png);
    width: 231px;
    height: 91px;
    position:absolute;
    bottom: 226px;

}
.logo3{
    background-image:url(../images/logo_yellow.png);
    width: 231px;
    height: 91px;
    position:absolute;
    bottom: 130px;
}
.logo4{
    background-image:url(../images/logo_red.png);
    width: 231px;
    height: 91px;
    position:absolute;
    bottom: 34px;

}

.content1{
    background-image:url(../images/logo_blue.png);
    width: 703px;
    height: 379px;
    position:absolute;
    left:236px;
    bottom:34px;
}
.content2{
    background-image:url(../images/logo_green.png);
    width: 703px;
    height: 379px;
    position:absolute;
    left:236px;
    bottom:34px;
}
.content3{
    background-image:url(../images/logo_yellow.png);
    width: 703px;
    height: 379px;
    position:absolute;
    left:236px;
    bottom:34px;

}
.content4{
    background-image:url(../images/logo_red.png);
    width: 703px;
    height: 379px;
    position:absolute;
    left:236px;
    bottom:34px;

}
هل كانت مفيدة؟

المحلول

إذا كان لديك دروس كما هو موضح في التعليق أعلاه، يجب عليك وضع "." أمامهم بدلا من #. # يدل معرف،. يدل على الفصل.

$(document.ready(function() {
    $(".logo1, .logo2, .logo3, .logo4").hover(function() {
        var arrayOfClasses = $(this).attr('class').split(' '); 
        $(arrayOfClasses).each(function() {
            if (this.indexOf("logo" > -1) {
                $(".content" + this.slice(this.indexOf("logo") + 4)).fadeIn("slow");
            }
        });
    }, function() {
        var arrayOfClasses = $(this).attr('class').split(' ');
        $(arrayOfClasses).each(function() {
            if (this.indexOf("logo" > -1) {
                $(".content" + this.slice(this.indexOf("logo") + 4)).fadeOut("slow");
            }
        }); 
    });
});

بالتأكيد رمز النسخ المتماثل، وليس اختبارها، لكنني أعتقد أن هذا سيفعل ما تريد. على تحريك أي من هذه العناصر، سيستغرق هذا البند المعني، تقسيم فئات البند إلى صفيف، تكرر من خلال فئة بما في ذلك الشعار، ثم تتلاشى في / خارج المحتوى المرقم المناسب عن طريق تقشير الرقم من نهاية اسم فئة الشعار.

تحرير بناء على التعليق أدناه:

إذا كنت تريد أن تكون أكثر بساطة، مما سيؤدي إلى النسخ المتماثل رمز إضافي، فستحتاج ببساطة:

$(".logo1").hover(function() { 
    $(".content1").fadeIn("slow");
}, function() {
    $(".content1").fadeOut("slow");
});

... لكل من الاقفان الخاص بك. وبالطبع، ضعها داخل $ (Document.ready (وظيفة () {...})؛

تحرير بناء على التعليق الثاني أدناه:

حسنا، لقد قمت بالتو اختبار من خلال تجربة جميع ملفاتك محليا والمشكلة ليست جافا سكريبت، إنها CSS / HTML. حاول إضافة هذا إلى CSS:

#container div {
    border: solid 1px #000000;
}

ستجد أنه في Safari أن هذه divs غير موجودة في أي مكان لأنها لا توضع بشكل صحيح ل WebKit، بينما في فايرفوكس، تظهر أنها تظهر.

من الممكن أيضا أن "التأخير" الذي تراه هو مشكلة حيث تكون جميع Divs مع Content Content1-4 مرئية بالفعل ولا يمكنك البدء في رؤية التأثير حتى يتخلى أولا ثم مرة أخرى. أنت تريد ضبط CSS الخاصة بهم لعرضها: لا شيء؛ وسيقوم jQuery's fadein جعلهم مرئيين.

نصائح أخرى

ربما تبحث عن وظيفة التحويم.

 $(document).ready(function(){ 
     $("#logo1, #logo2, #logo3, #logo4").hover(function(){
              //perform fadeIn here
      }, function(){
           //perform fadeOut here
      });
  });

بناء على ما شرح فنسنت لدي هذا الرمز

    $(document).ready(function(){ 
     $(".logo1, .logo2, .logo3, .logo4").hover(function(){
              //perform fadeIn here
            $('.content1').fadeIn("slow");
            $('.content2').fadeIn("slow");
            $('.content3').fadeIn("slow");
            $('.content4').fadeIn("slow");
      }, function(){
           //perform fadeOut here
            $('.content1').fadeOut("slow");
            $('.content2').fadeOut("slow");
            $('.content3').fadeOut("slow");
            $('.content4').fadeOut("slow");
      });
  });

ومع ذلك، لا أرى أي صلة بين التحويم على الشعار و FADEIN و FADOUT لكل محتوى، والتي ستكون مثل هذا:

Logo1 Hover Fadein Content1 ومحتوى Fadeout1 عندما لا يزيد الماوس عن Logo1

LOGO2 تحوم FADEIN CONTENT2 و FADEOUT CONTEM2 عندما لا يكون الماوس على logo2

Logo3 Hover Fadein Content3 و FADEOUT CONTECT3 عندما لا يكون الماوس فوق logo3

Logo4 Hover Fadein Content4 Content4 و Fadeout Content4 عندما لا يكون الماوس على logo4

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top