Question

I have a weird issue whereby I’m programming a carousel-type animation in jQuery. I have it so that when you click a link, it animates a div. To prevent the links from being able to be clicked during the animation I’ve set up a bind condition whereby the link binds to the animation, but during the animation it is unbound, then re-bound at the end. A fiddle best demonstrates: http://jsfiddle.net/aRrmD/1/.

This all works brilliantly well in Fiddlr. However, when I put this into an actual web page it doesn’t work so well if you click the link twice quickly – what you get is the first click triggers the animation but the second click reloads the page because the link is not bound to the animation function during the animation, so the default behaviour of the link kicks in and it becomes a standard link until the animation is complete and the function bound back to it. So if you double click the link, it reloads the page on the second click. I don’t know why it’s not doing this in Fiddlr, it must be something to do with how the events work with that system which makes it different from a stand-alone page.

So what I want to be able to do is make it so that when the link isn’t bound (i.e. during the animation) prevent the default link default behaviour. I know I could get around this by making the anchor not an anchor but this is part of a wider system which unfortunately gives me no control over that.

Thanks for any pointers folks…

Answer 1

You could test whether the animation is in progress instead of unbinding and binding the event handler:

function moveNext(e) {
    e.preventDefault();
    var $carousel = $('.carousel');
    if(!$carousel.is(':animated')) {
        $carousel.animate({
            marginLeft: '-=' + widthOfItem
        }, 500)
    }
}

Reference: :animated

---

In case you really wanted to unbind and bind the event handler, add an other event handler, which always prevents the default action:

$('.btn-next').bind('click', false); // will always prevent the default action
$('.btn-next').bind('click', moveNext);

Passing false to .bind is the same as passing function() { return false;). This prevents the default action and the event from bubbling up, so it might be exactly what you want. But you could simply pass function(e) { e.preventDefault(); } instead.

Then, instead of unbinding all event handlers, you only unbind moveNext:

$('.btn-next').unbind(moveNext);

You should cache a reference to $('.btn-next') though or use $(this).