jQuery - How to remove event handler only while an animation or function is running?

Question

I am attempting to create an image gallery. At the bottom I have a strip of thumbnails these thumbnails slide left and right when you click an arrow but if you click the arrow multiple times it ques the function.

I would like to remove the click handler while the function is run, then replace it again.

On a side note, my thumbnail scroller uses margin-left to animate, is it possible to use scrollTo or similar, to move an element a specific amount, horizontally, so if the thumbnails change size, it would still work?

Answer 1

There are many ways to do this. The easiest way is not to remove the click handler, but simply do nothing in the callback if it's animating already, eg:

$('.thumb').click(function() {
    if ($('#thumb-strip:animated').size() != 0)
        return;

    /* else animate #thumb-strip */
});

If you want to remove the click handler, and add it before, just do this:

var animateHandler = function() {
    var params = {}; // animate params
    $('.thumb').unbind('click', animateHandler); // unbind the click handler
    $('#thumb-strip').animate(params, function() {
        $('.thumb').click(animateHandler); // re-bind the click handler when animation is done
    });
};
$('.thumb').click(animateHandler);

Needless to say, the first way is simpler.

However what I usually do is not prevent the click event from happening, because the user won't expect that, but I also want to get rid of the queuing of animations. So what you can do is allow the user to click a thumb, and make it instantly animate to the new place with stop:

$('.thumb').click(function() {
    var params = {}; // animate params
    $('#thumb-strip').stop().animate(params);
});

This is the simplest and most intuitive solution.

And to answer your second question, you can use $(this).position() to get the thumb's relative position to the parent, and then animate based on that.