Я пишу очень классный плагин jquery, и я обнаружил, что я зацепил этот последний бит. в основном я анимация элемента на mouseenter и mouseleave. Хороший пример можно найти в этом jsbin, все работает хорошо, за исключением случаев, когда вы наводите курсор на кнопку "Назад" до того, как кнопка "Ход" закончила свою анимацию, она сдвинет изображение с экрана. Предполагая, что я знаю начальное местоположение элемента, есть ли способ удержать элемент от анимирования за его исходное местоположение, даже если анимация остановлена раньше? Мне нужно использовать .stop()
для анимации. Может быть, это что-то простое, что я просто не замечаю.
Фрагмент кода из ссылки jsbin:
// Start animation
$( "#go" ).mouseenter(function() {
$( ".block" ).stop().animate({ left: "+=100px" }, 2000 );
});
// Start animation in the opposite direction
$( "#back" ).mouseenter(function() {
$( ".block" ).stop().animate({ left: "-=100px" }, 2000 );
});
stop
принимает аргументы, которые определяют, как анимация остается. Вы можете использовать .stop(true, true)
, который .stop(true, true)
анимацию в конец, останавливая ее:
$( ".block" ).stop(true, true).animate({ left: "+=100px" }, 2000 );
... но это может быть немного нервным.
В качестве альтернативы, как вы говорите, вы знаете, где начинается элемент, просто верните его туда:
$( ".block" ).stop().css(originalPosition).animate({ left: "+=100px" }, 2000 );
... где originalPosition
- объект со свойствами left
и top
, предположительно. Это может быть немного нервным, это зависит от особенностей вашего случая использования.
Или, опять же, у вас есть исходная позиция, вы можете просто оживить ее до этой позиции (или переместиться на эту позицию + 100 пикселей, в зависимости).