-1

div にカーソルを合わせて複数の div を表示および非表示にする jQuery の表示/非表示効果を使用していますが、これは正常に機能します。 #a、#b を 200 ミリ秒で、#c を 400 ミリ秒で、#d を 600 ミリ秒で見たい。私はこれまでに持っているもののフィドルを持っています...

<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

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 に答える