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

Question

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

很长的故事

问题的简化形式是我正在使用第三方jQuery 滑动横幅插件 ，该插件使用一些混淆的JavaScript来滑动横幅。 我需要弄清楚slideComplete事件的种类，但我所拥有的只是一个元素id 。 以这个jsfiddle为例，想象一下JavaScript已经被混淆了。 当红色框达到极限并停止时，我需要触发一个函数。

我知道:animated伪选择器，但我认为它将需要我不断轮询所需的元素。 我经历了this ， this和this ，但无济于事。 我已经检查了jQuery Promise，但是我不知道在这种情况下可以使用它。 这样的问题最接近我的要求，但没有答案。

PS一些可能有用的更多信息：

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

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

我在这里摆了一个小提琴

即使使用混淆的代码，您也应该能够使用此方法检查它们如何发送参数进行动画处理（通常，当我发送参数进行动画处理时，我会使用“ options”对象）并将其回调函数包装在触发的匿名函数中一个事件... 像这个小提琴

这是相关的脚本块：

(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/