Jquery: Нужна помощь в понимании того, почему одновременно скрываются и отображаются элементы списка, я противоречу себе в сценарии?

Question

(без анимации: выглядит хорошо) http://jsfiddle.net/nicktheandroid/4QaZD/

это фильтруемый список.Каждый LI содержит скрытый список слов, при вводе одного из этих скрытых слов отображается его родитель (LI).Он прекрасно работает без прикрепленной к нему анимации slideUp / slideDown или FadeIn / FadeOut, но как только я добавляю анимацию, она будет плавно скользить по SlideDown, а затем очень быстро, так что почему-то я противоречу себе в сценарии или неправильно разделяю функциональность?я потратил так много часов, пытаясь понять это, мой мозг ломается.Может кто-нибудь сообщить мне, что я делаю не так?Я почти уверен, что это будет нечто очевидное, чего я просто не мог видеть.Все, что я пытаюсь сделать, - это сделать так, чтобы он двигался вверх / вниз вместо мгновенного скрытия / показа.

В этом втором jsfiddle я заменил .removeClass("hidden") на .slideDown(400) и заменил .addClass("hidden") на .slideUp(400)

(анимация: проблематично) http://jsfiddle.net/nicktheandroid/4Lcx3/

фильтрация не начинается, пока не набраны 3 символа.

Answer 1

Вы добавляете новые эффекты в очередь анимации с каждым нажатием клавиши, и то, как работает ваша фильтрация, постоянно меняется, в результате чего в очередь добавляется больше эффектов, прежде чем предыдущие будут завершены.

Перед добавлением дополнительных элементов в очередь вы должны очистить предыдущие элементы в очереди с помощью stop(true,true).

пример: http://jsfiddle.net/niklasvh/HWnaT/

Возможно, вы захотите добавить некоторую логикучтобы ничего не делать, если совпадающие результаты такие же, как и до предыдущего нажатия клавиш.