1

私はそのような設定をしています...

<div class="racebox">
<div class="rb_logo"><a href="#" class="trigger"><img src="<?php bloginfo( 'url' ); ?>/img      /new/rlogo_chm.png" width="250" height="184" /></a></div>
<div class="panel rb_bg"><img src="<?php bloginfo( 'url' ); ?>/img/new/bg_racebox.png" width="250" height="184" /></div>
</div>

これを使用して、レースボックス コンテナー内の 2 番目の div の不透明度を変更しています。

$(document).ready(function() {
    // OPACITY OF DIV SET TO 0%
    $(".panel").css("opacity","0.0");

    // ON MOUSE OVER
    $(".trigger").hover(function () {

    // SET OPACITY TO 100%
    $(".panel").stop().animate({
        opacity: 1.0
    }, "slow");
},function(){});

// ON MOUSE OUT
$(".trigger").mouseout(function () {
    // SET OPACITY BACK TO 0%
    $(".panel").stop().animate({
        opacity: 0.0
    }, "slow");
});
});

これは問題なく動作しますが、この「レースボックス」コンテナの複数のインスタンスが必要であり、このスクリプトが現在の div のみではなく、すべてのターゲット div をフェードすると確信しています。現在のコンテナ内の div のみをフェードするようにこれを設定する方法に関する提案はありますか?

jQuery にはかなり慣れていないため、非常に基本的なことが抜けていたら申し訳ありません。

4

3 に答える 3

0

これを使用して、現在のターゲットに関連する dom をトラバースします

$(document).ready(function() {
    // OPACITY OF DIV SET TO 0%
    $(".panel").css("opacity", "0.0");

    // ON MOUSE OVER
    $(".trigger").hover(function() {

        // SET OPACITY TO 100%
        // current hovered .trigger - get parent - find sibling with .panel class
        $(this).parent().siblings(".panel").stop().animate({
            opacity: 1.0
        }, "slow");
    }, function() {});

    // ON MOUSE OUT
    $(".trigger").mouseout(function() {
        // SET OPACITY BACK TO 0%
        $(this).parent().siblings(".panel").stop().animate({
            opacity: 0.0
        }, "slow");
    });
});​

または、セレクターでコンテキストを渡します

$(".panel",$(this).closest('.racebox'))
于 2012-09-26T20:07:36.820 に答える
0

コードを次のように変更します

    $(document).ready(function() {
    // OPACITY OF DIV SET TO 0%
    $(".panel").css("opacity","0.0");

    // ON MOUSE OVER
    $(".trigger").hover(function () {

    // SET OPACITY TO 100%
    this.parent().next().stop().animate({
        opacity: 1.0
    }, "slow");
},function(){});

// ON MOUSE OUT
$(".trigger").mouseout(function () {
    // SET OPACITY BACK TO 0%
    this.parent().next().stop().animate({
        opacity: 0.0
    }, "slow");
});
});
于 2012-09-26T20:07:50.843 に答える
0

その場合は、.panel の代わりに $(this) を使用してください

// ON MOUSE OVER
    $(".trigger").hover(function () {

    // SET OPACITY TO 100%
    $(this).parent().find('.panel').stop().animate({
        opacity: 1.0
    }, "slow");
},function(){});

// ON MOUSE OUT
$(".trigger").mouseout(function () {
    // SET OPACITY BACK TO 0%
    $(this).parent().find('.panel').stop().animate({
        opacity: 0.0
    }, "slow");
});
于 2012-09-26T20:08:13.427 に答える