How do I properly fade in and out using jQuery?
<p>Can anyone help me with this simple bit of jQuery? I am building a carousel that features many sliding <code>&lt;li&gt;</code>s. Each one has a short description accompanying it, which I want to fade out when the carousel slides, and fade in when the carousel stops at another <code>&lt;li&gt;</code>. 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 <code>&lt;li&gt;</code> 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.</p>

<p>The page is here: <a href="http://weaver-wp.weavertest.com/radiation-infographic/" rel="nofollow">http://weaver-wp.weavertest.com/radiation-infographic/</a></p>

<p>Thanks for any help :)</p>

<p>David</p>
