0

マウスがLIアイテムの上にあるときにメニューを展開し、マウスがLIアイテムを離れるとメニューを非表示にする次のコードを作成しました。

$('.sort').bind('mouseenter',function(){
    $('.options').slideDown('slow');
}).bind('mouseleave',function(){
    $('.options').fadeOut('fast');
});

.sort は li アイテムのクラスです。.options は子 UL です。リスト項目の上にマウスを移動するとメニューが展開され、項目を離れるとフェードアウトするため、コードは正常に機能します。しかし、マウスをアイテムの上やアイテム内ですばやく動かしすぎると、トグル/フェードに一貫性がなくなります。それは無限のフェード/トグルを作成します。それを修正する方法は?

申し訳ありませんが、HTML:

        <ul id="options">
            <li class="sort"><a href="#" class="sort-link"><?php _e('Shop by Brand','onecart'); ?></a>
                <ul class="options">
                    <li><a href="#">Latest Arrivals</a></li>
                    <li><a href="#">For Men</a></li>
                    <li><a href="#">For Women</a></li>
                    <li><a href="#">For Kids</a></li>
                    <li><a href="#">On Sale</a></li>
                </ul>
            </li>
        </ul>

CSS:

#options li.sort {
    position: relative;
    padding: 0 0 8px 0;
}
#options li.sort .sort-link {
    display: block;
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    color: #686868;
    text-transform: uppercase;
    text-shadow: 0 1px #eee;
    background: url(../img/arrow-list.png) no-repeat right top;
    padding: 0 16px 0 0;
}
#options li.sort .sort-link:hover {color: #000}
#options li.sort .current {
    color: #000;
    background-position: right bottom;
}

ul.options {
    display: none;
    position: absolute;
    background: #fff;
    top: 36px;
    left: 0;
    width: 180px;
    padding: 6px 0;
    border-top: 3px solid #ea6ea0;
    box-shadow: 0 1px 2px #aaa;
    z-index: 4;
}
4

2 に答える 2

2

.stop(true, true)キューに入れられたアニメーションを削除し、現在のアニメーションをすぐに完了するために使用します。

$('.sort').hover(function(){
  $('.options').stop(true, true).slideDown('slow');
}, function() {
  $('.options').stop(true, true).fadeOut('fast');
});
于 2012-08-19T11:54:06.810 に答える
0

jquery hoverintent プラグインを試してください。また、こちらの良い投稿もご覧ください。

これは、タイムアウトとカーソル ボクシングを備えた独自の遅延マウスオーバーの実装を作成する場合を除き、あらゆる種類のドロップダウン メガ メニューを扱っている場合にほぼ必要となるでしょう。

于 2012-08-19T12:08:19.790 に答える