Question

我有一个场景需要我检测周期性动画元素的动画停止并触发一个函数。 我无法控制元素的动画。动画可以是动态的，所以我不能使用聪明的setTimeout。

长篇故事

问题的简化形式是我正在使用第三方jQuery 滑动横幅插件，它使用一些混淆的JavaScript来滑动和滚出横幅。我需要找出slideComplete类事件的钩子，但我所拥有的只是一个元素id。以this jsfiddle为例，假设javascript已被混淆。当红色框达到极限并停止时，我需要触发一个功能。

我知道:animated伪选择器，但我认为需要我不断轮询所需的元素。我经历了this，this和this，但无济于事。我已经检查了 jquery promise 但我无法在这种情况下使用它。 This SO question最符合我的要求，但没有答案。

P.S。一些可能有用的信息：

该元素不是由JavaScript创建的，它存在于页面加载中。
我已经控制了何时在元素上应用插件（使其定期滑动横幅）

Answer 1

我使用过的大多数幻灯片插件都在动画结束时使用了更改类...你可以扩展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);

我把小提琴放在一起here

即使使用混淆代码，您也应该能够使用此方法检查它们在动画参数中的发送方式（我通常在向动画发送参数时使用“options”对象）并将其回调函数包装在匿名中触发事件的函数...... like this fiddle

以下是相关的脚本块：

(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);

Answer 2

好吧，既然你没有说明正在做什么样的动画，我会假设它是水平/垂直翻译，虽然我认为这也可以应用于其他效果。因为我不知道动画是如何完成的，所以setInterval评估是我猜测如何做到这一点的唯一方法。

var prevPos = 0;
var isAnimating = setInterval(function(){
    if($(YOUROBJECT).css('top') == prevPos){
        //logic here
    }
    else{
        prevPos = $(YOUROBJECT).css('top');
    }
},500);

这将每隔0.5秒评估一次对象的垂直位置，如果当前垂直位置等于.5秒前拍摄的位置，它将假定动画已经停止并且您可以执行一些代码。

编辑 -

刚刚注意到你的jsfiddle有一个水平翻译，所以jsfiddle的代码在这里http://jsfiddle.net/wZbNA/3/

动画完成时触发事件（无法控制动画）

长篇故事

2 个答案: