вернуть элемент в исходное положение после активации .stop ()

Question

вернуть элемент в исходное положение после активации .stop ()

0

Я пишу очень классный плагин 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 );
});

Halter 23 сен. 2013, в 18:37

Источник

Теги:

javascript

jquery

animation

1 ответ

Ещё вопросы

T.J. Crowder · Accepted Answer · 2013-09-23T14-07-00.000Z

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 пикселей, в зависимости).

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