動畫完成時觸發事件（無法控制動畫）

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/