JQuery: предотвратить очередь кликов

Question

$("#right").live("click", function(event) {
    $(".image_scroll").animate({"left": "+=300px"}, "slow");
});

Мне нужен щелчок, чтобы в основном не зарегистрироваться, пока анимация не будет завершена. Я пытался использовать return false, но, похоже, это полностью убивает ссылку.

Пробовал также использовать $(".image_scroll").stop().animate({"left": "+=300px"}, "slow");, но это только делает анимацию заикающейся и выглядит глючно.

Редактировать: идентификатор #right находится на изображении, а не a тег. HTML выглядит следующим образом:

<img src="/images/right.png" id="right" alt="" />
<div id="container">
    <div id="image_scroll">
        <img src="1.jpg" />
        <img src="3.jpg" />
        <img src="4.jpg" />
    </div><!-- /#image_scroll -->
</div> <!-- /#container

Answer 1

Вам нужно будет сохранить, работает ли анимация или нет, для этого вы можете использовать функцию jQuery.data:

$("#right").live("click", function(event) {
    var el = $(this),
        state = el.data('animation_state');
    if(state == 'busy') {
       //ignore clicks while the animation is running
       return false;
    } 
    el.data('animation_state', 'busy');
    $(".image_scroll").animate({"left": "+=300px"}, "slow", function() {
       //finished animating      
       //set the state to finished so we can click the element the next time
      el.data('animation_state', 'complete'); 
    }); 
});

Answer 2

Вам необходимо предоставить обратный вызов для анимации ...

$("#right").live("click", function(event) {
    event.preventDefault();
    var src = $(this).attr('href');
    $(".image_scroll").animate({"left": "+=300px"}, "slow", function() { window.location.href = src; });
});

Answer 3

Проверьте, запущена ли анимация и, если да,

$("#right").live("click", function(event) {

    if ( $(".image_scroll").is(":animated") ) {
      return false;
    }

    $(".image_scroll").animate({"left": "+=300px"}, "slow");
});

Answer 4

var handler = function(event) {
    $("#right").die("click");
    $(".image_scroll").animate({"left": "+=300px"}, "slow", function(){
        $("#right").live("click", handler);
    });
};
$("#right").live("click", handler);