.animate fails randomly
<p>I am having some problems making my animation work and it stops at random times on my ipad</p>

<p>so I have this html</p>

<pre><code>&lt;body&gt;


&lt;div class="touchslider-prev  sliderButtons" style="display: block;"&gt;back&lt;/div&gt;
&lt;div class="touchslider-next  sliderButtons" style="display: block;"&gt;next&lt;/div&gt;

&lt;section id="mainContent" style="width: 950px; overflow:hidden"&gt;

    &lt;div id="pageHolder" style="float: left; left: 0;  position: relative; width: 6000px;"&gt;


         &lt;div class="pageSize activeSlide" id="page1" style="width: 950px; float: left;  position: relative; height:500px; background-color:#F00"&gt;

           blah

         &lt;/div&gt;  


          &lt;div class="pageSize " id="page" style="width: 950px;  float: left;  position: relative; height:500px; background-color:#FF0"&gt;

           blah 2

         &lt;/div&gt;          


    &lt;/div&gt;


&lt;/section&gt;

&lt;/body&gt;
</code></pre>

<hr>

<p>and this javascript</p>

<hr>

<pre><code>&lt;script type="text/javascript"&gt;

function clickHandlerPrev(event) {

    // If event isn't already marked as handled, handle it
    if(event.handled !== true) {

        // Kill event handler, preventing any more clicks
        jQuery(window).off("swipeBackward", clickHandlerPrev);
    jQuery(window).off("swipeForward", clickHandlerNext);

        // Do your stuff here
        pageSize = jQuery(".mainHeader").width();
        slide("back", pageSize);

        // Mark event as handled
        event.handled = true;
    } 

    return false;
}

function clickHandlerNext(event) {

    // If event isn't already marked as handled, handle it

    if(event.handled !== true) {

        // Kill event handler, preventing any more clicks
        jQuery(window).off("swipeBackward", clickHandlerPrev);
    jQuery(window).off("swipeForward", clickHandlerNext);

        // Do your stuff here
        pageSize = jQuery(".mainHeader").width();
        slide("forward", pageSize);

        // Mark event as handled
        event.handled = true;
    }
    return false;
}



function slide(data, pageSize) {


    if (!pageSize) {
    pageSize = 950;
    }

    var left = calcLeft(data, pageSize);




        jQuery('#pageHolder').animate({
            left: left

          }, 400, function() {
            console.log("animation started");
            jQuery(window).on("swipeBackward", clickHandlerPrev);
    jQuery(window).on("swipeForward", clickHandlerNext);
            console.log("animation complete");

        });



}

function calcLeft(action, pageSize){

    var left;
    var currentPos = currentPosition();


    if (action == "back") {
console.log(pageSize);

        if (currentPos == "0") {
            left = -pageSize * 1;
        } else {

            left = currentPos + pageSize ;

        }

    } else if (action == "forward") {


        if (currentPos == -pageSize * 1) {
            left = 0;
        } else {        
            left = currentPos - pageSize ;

        }

    }

    return left;

}

function currentPosition() {

    var currentPosition = parseInt(jQuery("#pageHolder").css("left"), 10);
    return currentPosition;
}






jQuery(document).ready(function () {

jQuery(".touchslider-prev").click( function() { 

    jQuery(window).trigger('swipeForward');

});

jQuery(".touchslider-next").click( function() { 

    jQuery(window).trigger('swipeBackward');

});


jQuery(window).on('swipeForward', clickHandlerNext );
jQuery(window).on('swipeBackward', clickHandlerPrev );


console.log("here");
var maxTime = 1000,
    // allow movement if &lt; 1000 ms (1 sec)
    maxDistance = 50,
    // swipe movement of 50 pixels triggers the swipe
    target = jQuery('.pageSize'),
    startX = 0,
    startTime = 0,
    touch = "ontouchend" in document,
    startEvent = (touch) ? 'touchstart' : 'mousedown',
    moveEvent = (touch) ? 'touchmove' : 'mousemove',
    endEvent = (touch) ? 'touchend' : 'mouseup';

target.bind(startEvent, function(e) {
    // prevent image drag (Firefox)
    // e.preventDefault();
    startTime = e.timeStamp;
    startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
}).bind(endEvent, function(e) {
    startTime = 0;
    startX = 0;
}).bind(moveEvent, function(e) {
    // e.preventDefault();
    var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
        currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
        // allow if movement &lt; 1 sec
        currentTime = e.timeStamp;
    if (startTime !== 0 &amp;&amp; currentTime - startTime &lt; maxTime &amp;&amp; currentDistance &gt; maxDistance) {
        if (currentX &lt; startX) {
            // swipe left code here

           console.log("page forward trigger");
           jQuery(window).trigger('swipeForward');

        }
        if (currentX &gt; startX) {
            // swipe right code here
             console.log("page back trigger");
           //slide("back", pageSize);
            jQuery(window).trigger('swipeBackward');
        }
        startTime = 0;
        startX = 0;
    }
});


});


&lt;/script&gt;
</code></pre>

<hr>

<p>if you open this on say an ipad the idea is you can swipe the main colour panel. this will work sometimes and sometimes not and I am really struggling to find out why</p>

<p>can anyone help?</p>

<p>the slide stops periodically but if the users just uses the back/next button it always works, there doesn't seem to be an issue with the slide code though as it just triggers an event?</p>

<p>i have placed the code here</p>

<p><a href="http://demo.stg.brightonconsulting.net.au/templates/tests/ipadSlider/" rel="nofollow">http://demo.stg.brightonconsulting.net.au/templates/tests/ipadSlider/</a></p>
