jQuery Scrolling SlideShow
<p>I am currently creating a scrolling slideshow from scratch, and have run into a problem.</p>

<p>When I press the next button multiple times, the slides start to run together, how can I make sure the next slide waits until the current slide stops before the next one starts.</p>

<pre><code>    var scrollAmount=910
    var image0Left=-scrollAmount;
    var image1Left=0;
    var image2Left=scrollAmount;
    var scrollSpeed0=2000;
    var scrollSpeed1=2000;
    var scrollSpeed2=2000;
    $(document).ready(function() {
        $("#left-arrow").click(showPreviousSlide);
        $("#right-arrow").click(showNextSlide);
    });

    function showPreviousSlide(){
        image0Left+=scrollAmount;
        if(image0Left &gt; scrollAmount){
            image0Left=-scrollAmount;
            scrollSpeed0=0;
        }

        image1Left+=scrollAmount;
        if(image1Left &gt; scrollAmount){
            image1Left=-scrollAmount;
            scrollSpeed1=0;
        }

        image2Left+=scrollAmount;
        if(image2Left &gt; scrollAmount){
            image2Left=-scrollAmount;
            scrollSpeed2=0;
        }

        $("#slide0").animate({left: image0Left}, scrollSpeed0);
        scrollSpeed0=2000;
        $("#slide1").animate({left: image1Left}, scrollSpeed1);
        scrollSpeed1=2000;
        $("#slide2").animate({left: image2Left}, scrollSpeed2);
        scrollSpeed2=2000;
    }

    function showNextSlide() {
        image0Left-=scrollAmount;
        if(image0Left &lt; -scrollAmount){
            image0Left=scrollAmount;
            scrollSpeed0=0;
        }

        image1Left-=scrollAmount;
        if(image1Left &lt; -scrollAmount){
            image1Left=scrollAmount;
            scrollSpeed1=0;
        }

        image2Left-=scrollAmount;
        if(image2Left &lt; -scrollAmount){
            image2Left=scrollAmount;
            scrollSpeed2=0;
        }


        $("#slide0").animate({left: image0Left}, scrollSpeed0);
        scrollSpeed0=2000;
        $("#slide1").animate({left: image1Left}, scrollSpeed1);
        scrollSpeed1=2000;
        $("#slide2").animate({left: image2Left}, scrollSpeed2);
        scrollSpeed2=2000;
    }
</code></pre>

<p>That is all of the controlling script code. Here is a link to the actual site. <a href="http://sites.deyone.com/northeastchurch12/test" rel="nofollow">Site</a></p>

<p>There are three image slides that is moved each time the showPreviousSlide or showNextSlide is called. How can I make sure that one iteration of showPreviousSlide/showNextSlide function is finished moving my slides before it is called again? I removed my slideshow div overfill:hidden so that it's easier to see what is happening on my slideshow. </p>

<p>Thank you for your help.</p>

<p>Morgan</p>
