檢測每個（）中最後一個元素的動畫結束

我有一個SVG路徑的動畫，我想例如。在路徑中最後一個元素之後的addClass用動畫完成。我試圖爲animate（）添加回調，但它不起作用，它在第一個循環結束時開始。然後我嘗試了.when（startAnimeDude（））。然後（doStuff（）），但它也從頭開始。最後，我嘗試的是i == i.length -1，並且它從一開始就開始了（而動畫仍在繼續）。我錯過了什麼？感謝您的閱讀。檢測每個（）中最後一個元素的動畫結束

DEMO：http://jsfiddle.net/18yunbhk/

var anim = function() { 

    $.extend(jQuery.easing, { 
     easeInOutQuad: function (x, t, b, c, d) { 
      if ((t /= d/2) < 1) return c/2 * t * t + b; 
      return -c/2 * ((--t) * (t - 2) - 1) + b; 
     } 
    }); 

    var animeDude = function (parent, min, max, delayAnim) { 
     var paths = $('svg').find('path'); 

     $.each(paths, function (i) { 
      var totalLength = this.getTotalLength(); 

      $(this).css({ 
       'stroke-dashoffset': totalLength, 
       'stroke-dasharray': totalLength + ' ' + totalLength 
      }); 
      $(this).delay(delayAnim * i).animate({ 
       'stroke-dashoffset': 0 
      }, { 
       duration: Math.floor(Math.random() * max) + min, 
       easing: 'easeInOutQuad' 
      }); 

      if (i == 12) { //12 is last element 
       console.log('sad'); 
      } 

     }); 
    }; 

    var startAnimeDude = function (parent) { 
     animeDude(parent, 0, 1000, 40); 
    }; 
    startAnimeDude($('svg')); 


}; 
anim();

來源

2015-12-13 Joe Koker

喜歡的東西

if (i === (paths.length - 1)) { 
    console.log("sad"); 
}

JSFIDDLE

如果您只希望在動畫完成時檢查條件，那麼您可以將這段代碼寫入動畫的回調函數中。

$(this).delay(delayAnim * i).animate({ 
    'stroke-dashoffset': 0 
}, { 
     duration: Math.floor(Math.random() * max) + min, 
     easing: 'easeInOutQuad', 
     complete: function() { 
      if (i === (paths.length - 1)) { //12 is last element 
       console.log('sad'); 
      } 
     } 
});

來源

2015-12-13 21:23:30 rahul

感謝，但它不工作，其同樣的問題......「傷心」是打印出來的時候，動畫開始，我需要做的是，當最後一個元素與動畫 –

對不起，是我不好做。錯過了-1。編輯代碼並應該正常工作。 – rahul

其實我用 - 1 ... http://jsfiddle.net/4xf6g2eL/1/當你打開控制檯並運行片段，你可以看到，'悲傷'打印出來，而動畫還在。 ..我認爲問題是，每個循環立即在每個路徑，所以它的工作原理是正確的，但.delay（）正在創建這個問題 –

檢測每個（）中最後一個元素的動畫結束

回答

相關問題