Question

I have say 5 list items with images inside placed 200px from eachother.
I am trying to animate these list items to slide horizontally left if one presses a link with the id = #next or if one swipes left. And vice versa for sliding the list items right.

Every click or swipe results in a slide animation of 200px on every list item.
I ran into a problem where spamming the #next or #prev button would cancel the current animation and start a new one. This results in list items not sliding 200px+200px+200… but something like this 200px+140px+120… This because like I said the animation is cut and therefore the sliding distance will be shorter.

Now I solved this for the clicking event by disabling the button before the animation starts and then re’enabling it on the end callbak function. But this problem is remaining for the swipe event.

How can I solve this problem for the swipe event?

Answer 1

If you have the code working for your click event handlers, then just .trigger() a click event on the proper element for each of the swiperight and swipeleft events:

$(document).delegate('#next', 'click.my-namespace', function () {
    ...
}).delegate('#prev', 'click.my-namespace', function () {
    ...
}).delegate('#my-page-id', 'swipeleft swiperight', function (event) {
    if (event.type == 'swipeleft') {
        $('#next').trigger('click.my-namespace');
    } else {
        $('#prev').trigger('click.my-namespace');
    }
});

This way you have a single base of code that does the same thing, that gets called by multiple event handlers. I like to do this when I am adding touch events to a desktop design.

Notice I bound the event handlers with name-spaces so you don’t accidentally trigger the wrong event handler.

You can also use .stop(true, true) but it may make your animations jittery when playing many in a row. The best solution when using .stop() is to always animate to an absolute value, never use +=200px, that way when you use .stop() the animation can be stopped and instantly restarted to the new absolute position: http://api.jquery.com/stop