jQuery slide changing with index and fadeout -- jumpiness
<p>I am working on a jQuery slideshow plugin.  One of my methods involves switching back and forth between pictures.  I have been pretty successful in creating it, here is an isolated case with the code thus far for the particular method:</p>

<pre><code>var images = $("#simpleslides").children("img");

$(".slideButtons ul li").on("click", "a", function() {

        var anchorIndex = $(this).parent().index();
        var $activeSlide = $("#simpleslides img:visible");
        var $targetSlide = $(images[anchorIndex]);

        if($activeSlide.attr("src") == $targetSlide.attr("src") || $targetSlide.is(":animated")) {

            return false;

        } else {

            $activeSlide.css({ "z-index" : 0 });
            $targetSlide.css({ "z-index" : 1 });

            $targetSlide.stop().fadeIn("slow", function() {

                $activeSlide.hide();

            });

        }

    });
</code></pre>

<p>Here is a fiddle to see it in working action: <a href="http://jsfiddle.net/ase3E/" rel="nofollow">http://jsfiddle.net/ase3E/</a></p>

<p>For the most part, this works as you would expect it to.  When a user clicks on the corresponding number, it fades in the picture.  </p>

<p>However, I am running into some jumpiness and occasionally a complete <code>hide</code> of the slides when I am clicking around quickly.  If you play with the fiddle, you will see what I am referring to  Try clicking around on each image to see.</p>

<p>I have adopted <code>stop</code> which I thought would fix the problem but has not.  I have put the <code>hide</code> method after the <code>fadeIn</code> callback, but that has also not helped the situation.</p>

<p>What am I doing wrong here??</p>
