我正在使用 velocity.js 创建一个脉动效果作为 IE9 的后备,(请参见 box2 的 CSS 动画) 当鼠标在动画完成之前离开框(停留直到脉冲增长而不是移出)时,脉动元素保持可见。 https://jsfiddle.net/02vu80kc/1/
$(".box").hover(function () {
$(this).find('.effect-holder').velocity({
scale: [1.2, 0.9],
opacity: [1, 0]
}, {
easing: 'ease-out',
duration: 800,
loop: true
}, {
queue: false
}).velocity("reverse");
}, function () {
$(this).find('.effect-holder').velocity("stop");
});
效果完成后如何在鼠标移出时停止动画?
我正试图远离 .removeAttr('style')
并希望动画完成而不是停止。感谢您的帮助。
如果我用这个
$(this).find('.effect-holder').velocity('reverse').velocity("stop");
然后快速移动鼠标,动画再次开始,有时会在中间暂停。
最佳答案
要么使用有不同的开和关动画,两个动画调用.velocity("finish")
而不是 .velocity("stop")
,或者"stop"
(即,捕捉鼠标正确移动的时间)。
另请注意 {... loop:true ...}
意味着第一个动画永远不会结束,因此 "stop"
将在停止后立即发生“反转”(调用 .velocity("stop", true)
以防止这种情况发生)
编辑:在 "finish"
上打开问题错误 - https://github.com/julianshapiro/velocity/issues/495 罢工>
edit2:添加简单示例:
$("box").hover(function() {
// over
this.velocity("stop", true).velocity({
scale: [1.2, 0.9]
}, {
duration: 800,
loop: true
})
}, function() {
// out
this.velocity("stop", true).velocity({
scale: 0.9
}, {
easing: "ease-out",
duration: 800
})
});
关于javascript - 动画完成后如何停止velocity.js动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32852526/