jQuery链接动画与each（）

Question

我正在制作列表中每个项目元素的动画。我的目标是当每个项目完成动画功能时，下一个项目开始动画等等。现在，我要做的就是所有项目同时运行动画功能。项目列表应包含数百个项目，我只演示3个项目。

$(document).ready(function() {
      $('.list-item').each(function(){
        var _this = $(this);
        _this.find(".loading").animate({
            width: "100%"
        }, 2500);
    });
})

.list-item .item {
  position: relative;
  }
  .list-item .item {
  padding: 20px;
  margin-bottom:10px;
  }
  .list-item .item .loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: lightblue;
    opacity: 0.3;
    -webkit-transition: none !important;
    transition: none !important;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-item">
    <div class="item">
        Item 1
        <span class="loading">&nbsp;</span>
    </div>
    <div class="item">
        Item 2
        <span class="loading">&nbsp;</span>
    </div>
    <div class="item">
        Item 3
        <span class="loading">&nbsp;</span>
    </div>
</div>

Answer 1

您可以结合使用setTimeout()和动态delay来实现这一目标

$(document).ready(function() {
  var delay = 0;
  $('.list-item .loading').each(function() {
    var _this = $(this);
    setTimeout(function() {
      _this.animate({
        width: "100%"
      }, 2500);
    }, delay)
    delay += 2500;


  });
})

.list-item .item {
  position: relative;
}

.list-item .item {
  padding: 20px;
  margin-bottom: 10px;
}

.list-item .item .loading {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background: lightblue;
  opacity: 0.3;
  -webkit-transition: none !important;
  transition: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-item">
  <div class="item">
    Item 1
    <span class="loading">&nbsp;</span>
  </div>
  <div class="item">
    Item 2
    <span class="loading">&nbsp;</span>
  </div>
  <div class="item">
    Item 3
    <span class="loading">&nbsp;</span>
  </div>
</div>

Answer 2

您可以使用承诺：

$(document).ready(function() {
   var queue = $.Deferred().resolve(); 
      $('.list-item').find(".loading").each(function(){
        var _this = $(this);
        queue = queue.then(function(){
           return _this.animate({width: "100%"}, 2500).promise();
        })
    });
  });

演示：https://codepen.io/creativedev/pen/dKqOja

Answer 3

您可以使用complete callback-function of the animate运行下一个加载序列：

$(document).ready(function() {
      var animate = function($this) {            
        $this.find(".loading").animate({
            width: "100%"
        }, 2500, 
         function() {
           var $next = $this.next();
           if ($next.length > 0) {
               animate($next);
           }
         });
       };

      animate($('.item').first());
     
})

.list-item .item {
  position: relative;
  }
  .list-item .item {
  padding: 20px;
  margin-bottom:10px;
  }
  .list-item .item .loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: lightblue;
    opacity: 0.3;
    -webkit-transition: none !important;
    transition: none !important;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-item">
    <div class="item">
        Item 1
        <span class="loading">&nbsp;</span>
    </div>
    <div class="item">
        Item 2
        <span class="loading">&nbsp;</span>
    </div>
    <div class="item">
        Item 3
        <span class="loading">&nbsp;</span>
    </div>
</div>

Answer 4

如果您要设置动画的确切数量和定义的延迟-您可以设置setTimout以在准确的时间（当先前的动画完成时）调用每个动画

$(document).ready(function() {
      $('.item').each(function(i){
        setTimeout(function() { $(this).find(".loading").animate({ width: "100%" }, 2500); }.bind(this), i * 2500);
    });
})

.list-item .item {
  position: relative;
  }
  .list-item .item {
  padding: 20px;
  margin-bottom:10px;
  }
  .list-item .item .loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: lightblue;
    opacity: 0.3;
    -webkit-transition: none !important;
    transition: none !important;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-item">
    <div class="item">
        Item 1
        <span class="loading">&nbsp;</span>
    </div>
    <div class="item">
        Item 2
        <span class="loading">&nbsp;</span>
    </div>
    <div class="item">
        Item 3
        <span class="loading">&nbsp;</span>
    </div>
</div>