Question

I have a simple jQuery animation that moves a div to the right or left, upon a .click() event.

However, if the user clicks the event twice, it fires twice, which messes up the formatting.

Here’s an example of what I have:

$('a#right').click( function () {

if ($(this).is(':visible')) {

    $('#slide').animate({right: '+=257'}, 400, function () {
    slide_button();
    });

    }
});

The function slide_button() will check to see if the position of the div is within acceptable limits for the user’s viewpoint. If so, it will allow the right or left button to be visible. If it is outside of the limits, it will hide the buttons.

It works well, except if I click it twice–then it will just slide right off the page.

Is there a way to work with this to ignore double clicks?

Answer 1

Just check if element is already animating:

$('a#right').click( function () {
    if ($(this).is(':visible') && !$('#slide').is(':animated')) {
        $('#slide').animate({right: '+=257'}, 400, function () {
            slide_button();
        });
    }
});