如何在jquery传输中暂停和重新启动css3转换

我正在使用jquery中转移动和元素。 我想暂停动画并单击按钮继续播放。 但我无法弄清楚如何做到这一点。

JSFiddle： http ： //jsfiddle.net/b4hwq/2/

我确实试过了

stop().transition({}); 

但这是一个错误。

Answer 1

你大部分都在那里使用.stop()我只是添加了一点逻辑来告诉它什么时候停止。

工作实例

 $('button').click(function () { if (!$('.box').hasClass('stop')) { // if the box does not have class "stop" $('.box').stop().transition({ // stop the transition x: $('.box').offset().left + $('.box').width() / 2 // where the box should be when it stops }, 1).addClass('stop'); // simple add class for easy button control } else { // if the box has class "stop" $('.box').transition({ x: '350px' }, 5000).removeClass('stop'); // continue with regularly scheduled programming then remove "stop" } }); 

Answer 2

您可以使用clearQueue()来停止动画

clearQueue（）：停止队列中的其余function

jsFiddle在这里

HTML

 
 Click Me 

CSS

 .box{ opacity: 0.8; position: absolute; left: 0; top: 5%; background: #505060; border-radius: 1px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2); margin: -16px 0 0 -16px; width: 32px; height: 32px; z-index: 2; } 

jQuery的

 $(document).ready(function(){ $("#restartTransition").on("click", function(){ $('.box').clearQueue().transition({ x: '0px' },10); $('.box').transition({ x: '350px' },5000); }); }); 

Answer 3

我从过境库更新了完整function的小提琴：

 $('.box').transition({ x: '350px', duration: 5000, complete: function() { alert("complete!"); } }); 

的jsfiddle

即使使用clearQueue（）或stop（），仍然会执行完整的function