Question

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

<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我会很好，我也不会徘徊在其他人身上，*参见小提琴

Answer 1

我已经将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);
    })
}

演示：Fiddle

JQuery按顺序显示/隐藏div

1 个答案: