How do I properly fade in and out using jQuery?

Can anyone help me with this simple bit of jQuery? I am building a carousel that features many sliding <li>s. Each one has a short description accompanying it, which I want to fade out when the carousel sli开发者_StackOverflow社区des, and fade in when the carousel stops at another <li>. The problem is that when the carousel controls are clicked rapidly, the fades take a while to catch up. Also the current simple fadeIn/Out option doesn't work well when clicking to an <li> much further through the carousel (from the small grey discs underneath infographic). I've tried a few options but I'm not really getting anywhere.

The page is here: http://weaver-wp.weavertest.com/radiation-infographic/

Thanks for any help :)

David

The trick is to stop the operation before you start the next one:

http://api.jquery.com/stop/

bottom line, you stop all previous animations before you call in the next one. This avoids building up a queue of animations.

Use clearQueue before calling fadeIn/fadeOut