首先,jQuery Transit摇滚。如果您还没有看过它,请查看 http://ricostacruz.com/jquery.transit/并感到惊讶!
一个问题是,虽然它声称使用jQuery的效果队列,并且似乎在大多数情况下,我无法让jQuery的.stop()
方法使用它。
我在这里发布了一个小提琴:http://jsfiddle.net/nicholasstephan/sTpa7/
如果单击动画按钮,将使用标准的 jQuery .animate()
将框缓慢向右移动。如您所料,点击停止将停止动画。点击重置也会停止动画并将盒子放回它开始的地方。
如果您单击过渡,它应该执行完全相同的操作...但它没有...
这是怎么回事?有人知道解决方法吗?
谢谢。
这是一个可能有效的解决方案。
尝试创建一个新的转换函数,该函数对额外的回调进行排队。此回调可以在动画通过 stop 取消排队后进行清理。清除和跳过说明 但是,不会从旧的停止函数接收到。但是我们可以为此创建一个新的停止函数。这只是在浏览器中输入的,完全未经测试
(function($){
$.fn.stopableTransition = function (...){
var skip = false
var clear = false
this.handle("stopTransition", function(doclear, doskip){
skip = doskip; clear = doclear;
})
this.transition(...)
this.queue(function(){
if(skip){
//todo: ensure animation is removed from css
//todo: move object to where the animation would have finished
}
else
{
//todo: ensure animation is removed from css
//todo: make sure object stays at its current position
}
if(clear){
skip = false
clear = false
$(this).clearQueue()
}
else
{
skip = false
clear = false
$(this).dequeue()
}
})
}
$.fn.stopTransition = function (clear, skip){
clear = (typeof(clear) === 'undefined') ? false : clear;
skip = (typeof(skip) === 'undefined') ? false : skip;
this.triggerHandler("stopTransition", [clear, skip])
this.dequeue();
}
})(jQuery)
正如@Jason More所说,我在那个线程中查找了一下,我发现存在一个分叉,并且有一个名为transitionStop()
的函数(为了清除所有剩余的动画,你也应该调用clearQueue()
),但考虑到这个分叉大约在一年前最后一次提交,而原始的 TransitJS 在大约 3 个月前有最后一次提交, 也许使用该分叉会缺少一些功能。
但对于我需要的,这是最快的方法。