如何中断Zepto Fade
如何中断Zepto Fade
提问于 2012-03-06 03:56:26
我有以下Coffeescript代码：
# Coffeescript
setMessage = (message, options = {}) ->
t = statusArea.text(message)
if options['fade']
t.addClass('yellow')
t.fadeOut 4000, ->
$(this).removeClass 'yellow'
// Javascript
setMessage = function(message, options) {
var t;
if (options == null) options = {};
t = statusArea.text(message);
if (options['fade']) {
t.addClass('yellow');
return t.fadeOut(4000, function() {
return $(this).removeClass('yellow');
});
}
};这意味着在LI元素内显示状态消息。如果options['fade']被设置为任何值，那么我将调用淡入淡出的内容。在我的程序流中发生的第一件事是，我发出一个Ajax调用来填充SELECT，并向状态区域发布一条淡入淡出(即，将options['fade']设置为true)的“进行远程调用”消息。这可能几乎是瞬间的，也可能需要一段时间。这取决于结果的大小和网络流量。一旦填充了SELECT，我就会发布一条没有淡入淡出的"ready“消息。
当响应几乎是瞬间时，问题就会出现。在这种情况下，文本将被替换为"ready“，但动画会继续，淡出消息(即淡出LI元素)。
在开始另一个转换之前，有没有一种可以接受的方法来终止前一个转换？
回答 1
Stack Overflow用户
发布于 2012-07-19 17:33:58
我不知道您是如何实现stop()函数的，但最可靠的方法可能是完全删除节点的cssText。
我已经创建了一个fiddle to demonstrate 3 implementations。前两个实现的问题是，你需要知道哪个属性当前是动画的，以及它的原始值-尽管你也可以通过从节点的css文本中删除该属性来实现这一点，以使用任何适用的样式。
要取消Zepto动画，像这样的东西应该就足够了：
$.fn.stop = function() {
$(this).each(function() {
$(this)
.off("webkitTransitionEnd webkitAnimationEnd")
.get(0).style.cssText = "";
}
});
return this;
};然而，这样做的一个副作用是，zepto之前的样式更改也将被删除。一个有意义的、健壮的停止函数也应该是动画队列的一部分，以便也可以访问动画属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9573064
复制相关文章
相似问题
腾讯云开发者
