停止jQuery动画并反转

Question

我的移动动画效果如下：

 function showMessage() 
 {
     $('#message').stop().show().animate({top: '60px'}, 500, 'easeOutExpo');
 }      

 function hideMessage(msg,hide) 
 {
     $('#message').stop().delay(time).animate({ top: '0px' }, 600, 'easeInExpo');
 }          

动画在显示时将项目移动到60px，然后在隐藏时移回0px。问题是如果showMessage在hideMessage完成之前启动，我将得到一个丑陋的跳转动画。

我想要的是showMessage动画基本上反转hideMessage动画，如果它在hideMessage完成之前启动的话。

我希望这是有道理的。

Answer 1

你要确保动画A在开始B之前完成。

 $('#message').stop(true,true).show();

这就是说.stop（[clearQueue] [，jumpToEnd]）。 Here's the documentation.

你很亲密！ Fiddle