我正在编写一个jQuery插件,以通过CSS3 Transitions对元素进行动画处理。在jQuery中,.stop()这会中断所选元素上的当前动画。
.stop()
知道如何停止正在运行的CSS3动画吗?有没有一种本机的方法可以解决这个问题,或者我必须确定动画的大小并将动画元素的样式设置为当前位置,颜色大小或其他内容?
我试图将“ -webkit-transition-duration”设置为0 / none / false。但它不会停止动画。
无需深入了解插件,只需css3animate使用当前( 计算的 )所需道具的值来重新使用您的方法,并将持续时间设置为0( 在插件中为1,因为您使用!speed来使用默认值。)
css3animate
!speed
所以在示例中使用
var $animated = $('div'); $animated.css3animate({"height": $animated.css('height'), "width": $animated.css('width')}, 1);
会成功的
当然,您应该针对正在使用的当前属性自动执行此操作。如果在启动动画时使用计时器,而在有人使用stop方法时使用计时器,则还可以模拟暂停/继续功能。
更新
您可以将cssObject传递给动画的内容存储到data元素的,并在它们的停止循环上存储它们以获取当前值。
cssObject
data
因此,在您的animation方法中,您可以$obj.data('animationCss', cssObject);并且在stop方法中
animation
$obj.data('animationCss', cssObject);
stop
stop : function( clearQueue,jumpToEnd ){ return this.each(function(){ var $that = $(this); var currentCss = {}; var animationCss = $that.data('animationCss'); for (var prop in animationCss) currentCss[prop] = $that.css(prop); if (jumpToEnd) { animation($that,currentCss,1, function(){animation($that,animationCss,1)}); } else { animation($that,currentCss,1); } console.log("stop was called"); }); }