Как я могу остановить анимацию jquery, когда mousedown выпущен?

0

Прямо сейчас у меня есть простая кнопка, настроенная, которая анимируется при нажатии мыши и отменяет эффекты этой анимации при отпускании мыши. Анимация изменяет свойства "top", "left" и "box-shadow". Мне пришлось использовать специальный плагин jquery, чтобы функция jquery.animate() влияла на тэг box-элемента. Для удобства ссылок здесь находится репозиторий GitHub моего текущего примера.

Проблема в том, что даже если кнопка мыши будет немедленно выпущена, анимация завершается до того, как она продолжит отменять себя. Желаемый эффект заключается в том, чтобы пользователь мог контролировать, перемещается ли кнопка "вверх" или "вниз", удерживая или отпуская кнопку мыши. Посмотрите этот пример (последнее поле справа), чтобы получить представление о том, чего я хотел бы достичь.

В моих исследованиях пока кажется, что для этого нужно использовать привязку/развязывание, но примеры, которые я видел, не касались остановки анимации до ее завершения.

  • 0
    Извините за тех, кто не использует Chrome, я только оптимизировал код для правильного отображения в этом браузере, так как я просто тестирую это
Теги:
bind
jquery-animate
mousedown

1 ответ

1
Лучший ответ

Когда вы используете jQuery для анимации,

Вы можете использовать.stop() для

Остановите текущую анимацию на согласованных элементах.

ИЛИ

Вы также можете использовать.finish() для

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

Затем вы можете вернуться к исходным значениям элементов при остановке анимации.

Поделиться
  • 0
    Спасибо за ваш ответ. Да, я использую jQuery для выполнения этих анимаций, хотя знаю, что это можно сделать более аккуратно, используя CSS3-анимацию. Это решение было принято в силу обстоятельств (кросс-браузерная совместимость).
  • 0
    Я смог успешно реализовать это, добавив .stop() непосредственно перед каждым .animate() в двух обработчиках событий. Сначала это вызывало проблемы, потому что top и left свойства позиционирования были анимированы с использованием +=5px & -=5px вызывая перемещение кнопки при быстром нажатии мыши. Это было изменено для применения статических значений свойств top и left и это работает довольно хорошо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню