代码之家  ›  专栏  ›  技术社区  ›  Ryan

将操作推迟到.each()完成

  •  1
  • Ryan  · 技术社区  · 9 年前

    我有以下方法:

    function animatePortfolio(fadeElement) {
        fadeElement.children('article').each(function(index) {
            $(this).delay(1000*index).fadeIn(900);
        });
    }
    

    我想把行动推迟到 .each() 已完全完成。假设这是我需要使用的延迟/承诺的某个版本,但不了解在这种情况下它是如何工作的。

    3 回复  |  直到 9 年前
        1
  •  2
  •   Arun P Johny    9 年前

    可以使用动画返回的promise对象

    function animatePortfolio(fadeElement) {
      fadeElement.children('article').each(function(index) {
        $(this).delay(1000 * index).fadeIn(900);
      }).promise().done(function() {
        fadeElement.css('color', 'red')
      });
    }
    
    
    animatePortfolio($('div'))
    article {
      display: none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div>
      <article>1</article>
      <article>2</article>
      <article>3</article>
      <article>4</article>
    </div>
        2
  •  2
  •   Meenesh Jain Jasper Xu    9 年前

    这可以用 done 作用

    function animatePortfolio(fadeElement) {
       fadeElement.children('article').each(function(index) {
          $(this).delay(1000*index).fadeIn(900);
      }).promise().done(function(){
         // do aditional animation here 
       });
     }
    

    调用函数时在那里执行

        animatePortfolio(fadeElement).promise().done(function(){
    
         // do things here 
        });
    
        3
  •  0
  •   iCollect.it Ltd    9 年前

    不要使用 done 与动画承诺,好像任何一个都在目标状态下开始它不会开火。使用 always() 相反

    function animatePortfolio(fadeElement) {
       fadeElement.children('article').each(function(index) {
          $(this).delay(1000*index).fadeIn(900);
      }).promise().always(function(){
         // do aditional animation here 
       });
     }