JQuery slideToggle () щелкнул несколько раз-предотвратить анимацию

Я некоторое время искал решение, но, похоже, не могу его найти. Я думал, может быть, используя jQuery .clearQueue() как в мою скрипку, но это Пупкин'snt работы.

здесь скрипка.

чтобы было ясно: я хочу, чтобы sideToggle() выполнялся, но как только он снова щелкнет, и первый slideToggle() еще не закончен, он должен остановить анимацию первого и скользить обратно вверх. С помощью .clearQueue() метод он работает за два клика, но когда например, нажал три раза, пропадает окно и высота как-то перепутались.

9
jquery jsfiddle slidetoggle

3 ответов

использование jquery .stop() api делает трюк.

рабочий пример.

19

есть плагин, который вы, вероятно, могли бы использовать для остановки и возобновления анимации, которая не является родной для jQuery:http://tobia.github.com/Pause/

Если вам не нужны ваши анимации, чтобы быть это тонко настроены, то вы можете использовать .finish (добавлен jQuery 1.9) вместо .clearQueue. Проблема в том, что анимация заканчивается внезапно, что выглядит немного странно.

проблема в том, что jQuery не отслеживает все, что оригинальная высота (just put $("div").data('originalHeight', $("div").height()) сделать это самостоятельно). Это предотвратит завинчивание высоты, очистив очередь в середине анимации:

http://jsfiddle.net/xj3Py/3/

Это все еще не идеально, так как он прыгает с 3 или более щелчками, но, по крайней мере, высота не испортится.

3

использование stop () во время анимации может привести к плохим ситуациям, когда исходная высота больше не может быть достигнута.

другой вариант-заставить анимацию закончить, прежде чем щелчок сможет запустить ее снова:

function clickFunc() {
    var $this=$(this);
    if($this.hasClass('toggling')){return;}
    $this.addClass('toggling')
    $this.stop().slideToggle(300,function(){
        $this.removeClass('toggling');
    });
}
3