-1

我正在使用悬停在 div 上的 jQuery 显示/隐藏效果来显示和隐藏几个 div，这很好用，问题是我希望 div 不是一次以交错的顺序显示和隐藏，所以如果我将鼠标悬停在#a，我想在 200 毫秒内看到 #b，在 400 毫秒内看到 #c，在 600 毫秒内看到 #d，然后当我悬停时，我希望它们以反向顺序隐藏？到目前为止，我有一个小提琴......

<div id="one">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>

$("#b, #c, #d").hide();
$("#a,#b, #c, #d").hover(function () {
$("#b, #c, #d").show();
}, function () {
$("#b, #c, #d").hide();
});

http://jsfiddle.net/bloodygeese/9LQAu/

我也想在整个网站上复制它，所以最好知道如何只影响我悬停的 div 而不是另一个，*见小提琴

4

2 回答 2

1

在这里，我有一个想法：

$('div').on('hide-on-by-one', function () {

    var prev = $(this).prev('div');

    $(this).hide('slow', function () {
        prev.trigger('hide-on-by-one');
    });
});

/* trigger the event on your last element */

$('div:last').trigger('hide-on-by-one');
于 2015-08-25T17:42:05.473 回答
0

我已将 ID 更改为类，因为似乎有多个元素具有相同的值

$('.one').each(function(){
    var $this = $(this)
    var $oths = $this.children('div').not('.a').hide();
    $this.children('.a').hover(function () {
        $oths.each(function(idx){
            var $item = $(this);

            clearTimeout($item.data('hideTimer'))

            var timer = setTimeout(function(){
                $item.show();
            }, (idx + 1) * 200);
            $item.data('showTimer', timer);
        })
    }, function () {
        hideOthers($oths)
    });

    $oths.hover(function(){
        $oths.each(function(idx){
            clearTimeout($(this).data('hideTimer'))
        })
    }, function(){
        hideOthers($oths)
    })

})


function hideOthers($oths){
    var len  = $oths.length;
    $oths.each(function(idx){
        var $item = $(this);

        clearTimeout($item.data('showTimer'))

        var timer = setTimeout(function(){
            $item.hide();
        }, (len - idx) * 200);

        $item.data('hideTimer', timer);
    })
}

演示：小提琴

于 2013-08-21T00:31:30.103 回答