Javascript 动画完成时触发事件(无法控制动画)
我有一个场景要求我检测周期性动画元素的动画停止并触发一个函数我无法控制元素的动画。动画可以是动态的,所以我不能使用聪明的Javascript 动画完成时触发事件(无法控制动画),javascript,jquery,events,animation,Javascript,Jquery,Events,Animation,我有一个场景要求我检测周期性动画元素的动画停止并触发一个函数我无法控制元素的动画。动画可以是动态的,所以我不能使用聪明的setTimeout 长话短说 问题的简化形式是,我正在使用第三方jQuery滑动横幅插件,该插件使用一些模糊的JavaScript来滑动横幅。我需要在slideComplete这类事件上找到一个钩子,但我所拥有的只是一个元素id。以javascript为例,想象一下javascript已经被混淆了。我需要在红色框达到极限并停止时触发一个函数 我知道:animated伪选择器,
setTimeout
长话短说
问题的简化形式是,我正在使用第三方jQuery滑动横幅插件,该插件使用一些模糊的JavaScript来滑动横幅。我需要在slideComplete
这类事件上找到一个钩子,但我所拥有的只是一个元素id
。以javascript为例,想象一下javascript已经被混淆了。我需要在红色框达到极限并停止时触发一个函数
我知道:animated
伪选择器,但我认为它需要我不断轮询所需的元素。我已经经历了,但是没有用。我已经检查了jquery承诺,但是我不知道在这个场景中使用它。最接近我的要求,但没有答案
p.S.更多可能有用的信息:
既然你没有给出任何关于正在制作哪种动画的指示,我就假设它是水平/垂直转换,尽管我认为这也可以应用于其他效果。因为我不知道动画是如何完成的,所以
setInterval
评估将是我猜测如何完成的唯一方法
var prevPos = 0;
var isAnimating = setInterval(function(){
if($(YOUROBJECT).css('top') == prevPos){
//logic here
}
else{
prevPos = $(YOUROBJECT).css('top');
}
},500);
这将每隔.5秒计算一次对象的垂直位置,如果当前垂直位置等于.5秒前的垂直位置,则将假定动画已停止,并且可以执行一些代码
编辑--
刚刚注意到您的JSFIDLE有一个水平翻译,因此您的JSFIDLE代码在这里我使用的大多数幻灯片插件在动画结束时使用了更改类。。。您可以扩展jQuery的“addClass”方法,以允许您捕获类更改,只要您使用的插件使用该方法,它应该:
(function($){
$.each(["addClass","removeClass"],function(i,methodname){
var oldmethod = $.fn[methodname];
$.fn[methodname] = function(){
oldmethod.apply( this, arguments );
this.trigger(methodname+"change");
return this;
}
});
})(jQuery);
我拼凑了一把小提琴
即使使用模糊代码,您也应该能够使用此方法检查它们如何发送参数进行动画制作(通常在发送参数进行动画制作时,我使用“选项”对象),并将它们的回调函数包装在触发事件的匿名函数中。。。
以下是相关的脚本块:
(function($){
$.each(["animate"],function(i,methodname){
var oldmethod = $.fn[methodname];
$.fn[methodname] = function(){
var args=arguments;
that=this;
var oldcall=args[2];
args[2]=function(){
oldcall();
console.log("slideFinish");
}
oldmethod.apply( this, args );
return this;
}
});
})(jQuery);
听起来只需通过回调创建自己的插件会更容易?这个问题是完成此操作之前的最后一步:)或使用其他插件。谢谢您的回答@Trey。最后我帮我完成了:)