1

そのため、うまく機能するメニューのsetTimout slideUp / Down関数を作成できましたが、ユーザーがリンクにカーソルを合わせたり、子リンクにカーソルを合わせたりすると、すばやく上下にスライドします。この質問は一般的ですが、さまざまなことを試みましたが失敗しました。

これが実際のデモです-リンクの上にマウスを置くと、関数がおかしくなります http://jsfiddle.net/eA2HL/2/

jQuery('.nav.mainmenu > li').each(function() {
    var t = null;
    var $this = jQuery(this);
    var result = jQuery('#result');
    $this.hover(function() {
        t = setTimeout(function() {
            if($this.find('ul').length > 0) {
                result.slideDown(200, function() {
                    if($this.is(':visible')) {
                        $this.find('ul').show();
                    }
                });
            }
            t = null;
        }, 300);
    }, function() {
        if (t) {
            clearTimeout(t);
            t = null;
        } else {
            $this.find('ul').hide(0);
            result.slideUp(333, function() {
                $this.find('ul').hide(0);
            });
        }
    });
});
4

2 に答える 2

3

.stop(1,1)（と同じ）を使用.stop( true , true )すると、いくつかのアニメーションの蓄積をクリアするのに役立ちます。

jQuery('.nav.mainmenu > li').each(function() {
        var t = null;
        var $this = jQuery(this);
        var result = jQuery('#result');
        $this.hover(function() {
            t = setTimeout(function() {
                if($this.find('ul').length > 0) {
                    result.stop(1,1).slideDown(200, function() {  // HERE
                        if($this.is(':visible')) {
                            $this.find('ul').show();
                        }
                    });
                }
                t = null;
            }, 300);
        }, function() {
            if (t) {
                clearTimeout(t);
                t = null;
            } else {
                $this.find('ul').hide(0);
                result.slideUp(333, function() { 
                    $this.find('ul').hide(0);
                });
            }
        });
    });

フィドルデモ

于 2012-07-11T15:54:08.100 に答える
1

「結果」が次のようにアニメーション化されているかどうかを確認することもできます（アニメーション化されていない場合）：

 if($(result).is(':animated')){
  return false;
  }
于 2012-07-11T16:03:35.727 に答える