Question

我有这样的设置......

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

这样可以正常工作，但我希望这个＆＃34; racebox＆＃34;有多个实例。容器，我很确定这个脚本会淡化所有目标div而不是当前的目标。有关如何设置它的任何建议，以便它只淡化当前容器内的div？

jQuery相当新，对不起，如果我错过了一些超级基本的东西。

Answer 1

使用它来相对于当前目标遍历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'))

Answer 2

将代码更改为以下

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

Answer 3

如果是这种情况，请使用$（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");
});

jQuery淡出单独的DIV内容，但仅限于当前的DIV

3 个答案: