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>

我正在使用它来更改 Racebox 容器内第二个 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");
});
});

这很好用，但我想拥有这个“racebox”容器的多个实例，而且我很确定这个脚本会淡化所有目标 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

如果是这种情况，请使用 $(this) 而不是 .panel

// 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 回答