Нервное поведение слайд-меню jQuery при быстром наведении мыши

поэтому мне удалось создать функцию 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);
            });
        }
    });
});

jquery slidedown slideup
person iamwhitebox    schedule 11.07.2012    source источник
comment
Отредактировал мой ответ, так как появилась проблема, на которую указал @Geeo.   -  person Roko C. Buljan    schedule 11.07.2012

Ответы (2)


arrow_upward
3
arrow_downward

Использование .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);
                });
            }
        });
    });

демонстрация скрипки

person Roko C. Buljan    schedule 11.07.2012
comment
стоп(1) а?? не знал, что ты так умеешь - person iamwhitebox; 11.07.2012
comment
@JeffJones :) ну теперь ты знаешь! Надежда была полезной. - person Roko C. Buljan; 11.07.2012
comment
это не работает, когда вы переходите от одного пункта меню к другому, не выходя с помощью мыши - person ; 11.07.2012
comment
@Geeo Верно. jsfiddle.net/roXon/eA2HL/13 отредактировано. Спасибо, что указали. - person Roko C. Buljan; 11.07.2012
comment
кто-нибудь проверял это в Firefox? получая некоторые странные результаты - спасибо за вашу помощь!!! - person iamwhitebox; 11.07.2012
comment
В firefox у меня работает! В конце концов вы можете изменить stop(1,1) на stop(false,true), если хотите немного поэкспериментировать:) - person Dejo Dekic; 11.07.2012

arrow_upward
1
arrow_downward

Вы также можете проверить, анимируется ли «результат» следующим образом (если анимация не анимируется):

 if($(result).is(':animated')){
  return false;
  }
person Dejo Dekic    schedule 11.07.2012