Как замедлить и остановить текущую анимацию jQuery?

Question

вопрос jQuery. У меня есть анимированный .block, перемещающийся вправо на 5000 пикселей.

$(".block").animate({"left": "+=5000px"}, 2000, 'linear'); 

Что мне нужно медленно остановить эту анимацию после щелчка:

('#clickme').click(function() { 
// ... stop $(".block") animation, not immediately, but with some easing 
}); 

Возможно ли это с JQuery? Любые предложения будут оценены.

Answer 1

Вы можете немедленно остановить анимацию с функцией .stop():

http://api.jquery.com/stop/

Это делает жесткий упор, однако. Если вы будете анимировать, это будет довольно крутая остановка.

Answer 2

Я бы занялся этим, остановив анимацию, когда пользователь нажимает триггер остановки, а затем запускает новую анимацию, которая дает иллюзию ослабленной остановки. Вот пример: http://jsfiddle.net/brianflanagan/BsQvh/ Трюк настраивает настройки второй анимации, поэтому все работает гладко. Вы захотите выйти замуж за продолжительность и расстояние, чтобы он сочетался с темпом первоначальной анимации.

Answer 3

Я знаю, что это старое, но вот как бы я это сделать:

var stopping = false; 
var lastNow = 0; 
$(".block").animate({left:"+=5000px"}, { 
    step: function(now){ 
     if (stopping) { 
      var delta = lastNow - now; 
      $(this).stop().animate({ left : "+=" delta * 2 }, 1000, "easeInOutQuad"); 
      stopping = false; 
     } 
     lastNow = now; 
    }}); 

Для остановки установите stopping в true