jQuery animation: Игнорировать двойной щелчок

Question

У меня есть простая анимация jQuery, которая перемещает div вправо или влево, на событие .click().

Однако, если пользователь дважды нажимает на событие, он запускается дважды, что испортит форматирование.

Вот пример того, что у меня есть:

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

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

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

    } 
}); 

Функция slide_button() будет проверять, чтобы увидеть, если положение DIV находится в допустимых пределах для точки зрения пользователя. Если это так, это позволит видеть правую или левую кнопку. Если он выходит за пределы, он скроет кнопки.

Это хорошо работает, за исключением случаев, когда я нажимаю его дважды - тогда он просто сдвинется со страницы.

Есть ли способ работать с этим, чтобы игнорировать двойные клики?

Answer 1

Просто проверить, если элемент уже анимировать:

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

Answer 2

Вы можете .unbind() событие нажмите один раз щелкнул, который позволит предотвратить его от выполнения несколько раз:

$('a#right').click(function() { 
    $(this).unbind('click'); 
    ... 
}); 

После того, как анимация завершает можно перепривязывают, если вам нужно, чтобы иметь возможность нажать еще раз.

Answer 3

Я обычно обойти эту проблему, установив глобальную переменную и если, как

clicked = true; 
$(div).click(function(){ 
    if (!clicked){ 
     clicked = true; 
     Your function with a callback setting clicked to false 
    } 
    .... 
}) 

Answer 4

запустить Вы можете использовать one() в JQuery:

$('a#right').one("click", function() { 
    slide($(this)); 
}); 

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

После завершения анимации событие click привязано к li nk снова, и его можно выполнить не более одного раза.