Анимация jQuery: игнорировать двойной щелчок

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

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

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

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

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

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

    }
});

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

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

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


click jquery double-click
person Jordan    schedule 09.09.2010    source источник

Ответы (4)


arrow_upward
15
arrow_downward

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

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

arrow_upward
7
arrow_downward

Вы можете использовать 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));
            }
        });
}

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

person Zafer    schedule 09.09.2010

arrow_upward
1
arrow_downward

Обычно я обхожу это, устанавливая глобальную переменную и запуская if like

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

arrow_upward
0
arrow_downward

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

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

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

person Darin Dimitrov    schedule 09.09.2010