Как удалить обработчик событий только во время работы анимации или функции? - PullRequest
Новая
       21

Как удалить обработчик событий только во время работы анимации или функции?

1 голос
/ 09 августа 2010

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

Я хотел бы удалить обработчик щелчка во время работы функции, а затем заменить его снова.

Что касается примечания, в моем скроллере миниатюр для анимации используется margin-left, возможно ли использовать scrollTo или аналогичный для перемещения элемента на определенную величину по горизонтали, поэтому, если миниатюры меняют размер, он все равно будет работать? 1005 *

1 Ответ

0 голосов
/ 09 августа 2010

Есть много способов сделать это. Самый простой способ - не удалять обработчик щелчков, а просто ничего не делать в обратном вызове, если он уже анимируется, например: 

$('.thumb').click(function() {
    if ($('#thumb-strip:animated').size() != 0)
        return;

    /* else animate #thumb-strip */
});

Если вы хотите удалить обработчик кликов и добавить его раньше, просто сделайте это: 

var animateHandler = function() {
    var params = {}; // animate params
    $('.thumb').unbind('click', animateHandler); // unbind the click handler
    $('#thumb-strip').animate(params, function() {
        $('.thumb').click(animateHandler); // re-bind the click handler when animation is done
    });
};
$('.thumb').click(animateHandler);

Излишне говорить, что первый способ проще.

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

$('.thumb').click(function() {
    var params = {}; // animate params
    $('#thumb-strip').stop().animate(params);
});

Это самое простое и интуитивно понятное решение.

И чтобы ответить на второй вопрос, вы можете использовать $(this).position(), чтобы получить относительное положение большого пальца относительно родителя, а затем анимировать на основе этого.

...