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

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

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

Кстати, мой скроллер миниатюр использует левое поле для анимации, возможно ли использовать scrollTo или подобное, чтобы переместить элемент на определенную величину по горизонтали, поэтому, если миниатюры изменят размер, это все равно будет работать?


image jquery event-handling gallery
person Sabai    schedule 09.08.2010    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

$('.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(), чтобы получить положение большого пальца относительно родителя, а затем анимировать на основе этого.

person reko_t    schedule 09.08.2010
comment
Эй, спасибо за такой подробный ответ. Я изучил каждый метод, и хотя отвязка работала, она была довольно неуклюжей. Я нашел несколько других примеров остановки(), и я думаю, что это подойдет лучше всего, однако я не могу заставить его работать, верно? pastebin.com/ygPYAfsD - person Sabai; 09.08.2010
comment
Я думал, что вы будете прокручивать, основываясь на нажатом пальце, но, похоже, это не так. Проблема с этим подходом заключается в том, что если Gallery_nav находится в середине анимации, текущая позиция еще не правильная. Что вы можете сделать, так это сохранить позицию, до которой вы прокручиваете, а затем использовать эту позицию при нажатии стрелки. Пример: pastebin.com/fvVXQTJr - person reko_t; 09.08.2010