2

したがって、マウスを div logo1の上に移動すると、div content1フェードインを作成しようとしています。マウスがlogo1の上になく、コンテンツ div の可視性が CSS に隠されている場合、content1はフェードアウトする必要があります。logo2 3 と 4 も同様

このコードを試してみましたが、うまくいきませんでした (フェードインを使用した後に追加する場所がわからないため、フェードアウトを追加しませんでした)

$(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テゲリルがあります

<!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>

JavaScript ビット

$(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;

}
4

3 に答える 3

4

あなたはおそらくホバー機能を探しています。

 $(document).ready(function(){ 
     $("#logo1, #logo2, #logo3, #logo4").hover(function(){
              //perform fadeIn here
      }, function(){
           //perform fadeOut here
      });
  });
于 2009-12-16T01:39:46.030 に答える
1

上記のコメントで説明されているクラスがある場合は、「.」を付ける必要があります。# の代わりにそれらの前に。# は ID を意味します。クラスを意味します。

$(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(function() {...}); の中に入れます。

以下の 2 番目のコメントに基づいて編集します。

わかりました。すべてのファイルをローカルで試してみたところ、問題は JavaScript ではなく、CSS/HTML にあります。これをcssに追加してみてください：

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

Safari では、これらの div は Webkit に対して適切に配置されていないため、どこにも存在しませんが、Firefox では表示されます。

表示されている「遅延」は、クラス content1-4 のすべての div が既に表示されており、最初にフェードアウトしてから元に戻るまで効果を見始めることができないという問題である可能性もあります。 CSS を display: none; に設定したい。そしてJQueryのfadeInはそれらを可視化します。

于 2009-12-16T02:53:31.623 に答える
0

ヴィンセントが説明したことに基づいて、このコードを取得しました

    $(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");
      });
  });

ただし、ロゴのホバーと各コンテンツのフェードインおよびフェードアウトとの間に関連性は見られません。これは次のようになります。

マウスがロゴ 1 の上にない場合、ロゴ 1 ホバー フェードイン コンテンツ 1 とフェードアウト コンテンツ 1

マウスがロゴ2の上にない場合、ロゴ2はコンテンツ2にフェードインし、コンテンツ2をフェードアウトします

マウスが logo3 の上にない場合、logo3 ホバー フェードイン content3 およびフェードアウト content3

マウスが logo4 の上にない場合、logo4 ホバー フェードイン content4 およびフェードアウト content4

于 2009-12-16T03:16:08.017 に答える