Sequential animations in Jquery
<p>I see a lot people struggling with this(me included). I guess it's mostly due to not perfectly knowing how Javascript scopes work.</p>

<p>An image slideshow is a good example of this. So lets say you have series of images, the first one fades in => waits => fades out => next image. </p>

<p>When I first created this I was already a little lost. I think the biggest problem for creating the basics is to keep it clean. I noticed working with callbacks can get uggly pretty fast.</p>

<p>So to make it even more complicated most slideshows have control buttons. Next, previous, go to img, pause, ...</p>

<p>I've been trying this for a while now and this is where I got:</p>

<pre><code>$(InitSlideshow);

function InitSlideshow() {
    var img = $("img").hide();

    var animate = {
        wait: undefined,
        start: function() {
            img.fadeIn(function() {
                animate.middle();
            });
        },

        middle: function() {
            animate.wait = setTimeout(function() {
                animate.end();
            }, 1000);
        },

        end: function() {
            img.fadeOut(function() {
                animate.start();
            });
        },

        stop: function() {
            img.stop();
            clearTimeout(animate.wait);
        }
    };

    $("#btStart").click(animate.start);
    $("#btStop").click(animate.stop);

};
</code></pre>

<p>This code works(I think) but I wonder how other people deal with sequentials animations in Jquery? Tips and tricks are most welcome. So are links to good resources dealing with this issue.</p>

<p>If this has been asked before I will delete this question. I didn't find a lot of info about this right away. I hope making this community wiki is correct as there is not one correct answer to my question.</p>

<p>Kind regards,</p>

<p>Pickels</p>
