Jquery: Need help understanding why its hiding and showing list elements at the same time, am i contradicting myself in the script?

(no animation: looks fine) http://jsfiddle.net/nicktheandroid/4QaZD/

its a filterable list. Each LI contains a hidden list of words, when you type one of those hidden words in, its parent (the LI) is shown. It works fine without a slideUp/slideDown or FadeIn/FadeOut animation attached to it, but once I add the animation, it will slideDown then slideUp really quickly, so somehow i'm contradicting myself in the script, or not seperating functionality correctly? i've spent so many hours trying to figure this out, my brain is racked. Can someone inform me what i'm doing wrong? I'm pretty sure it's gonna be something obvious that I just couldn't see. All i'm trying to do is have it slideUp/Down instead of instant hide/show.

In this second jsfiddle, i've replaced .removeClass("hidden") with .slideDown(400) and replaced .addClass("hidden")开发者_运维问答 with .slideUp(400)

(animated: problematic) http://jsfiddle.net/nicktheandroid/4Lcx3/

it doesn't start to filter until 3 characters are typed.

You are adding new effects to the animation queue with every keystroke, and the way your filtering works it constantly changes resulting in more effects added to the queue before previous ones have completed.

Before adding more items to the queue, you should clear the previous queued items with stop(true,true).

example: http://jsfiddle.net/niklasvh/HWnaT/

You may wish to add some logic to avoid doing anything, if the matched results are the same as they were before the previous keydown.