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

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

jquery-deferred each promise jquery javascript

1

Ryan · 技术社区 · 11 年前

我有以下方法:

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

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

3 回复 | 直到 11 年前

1

2

Arun P Johny 11 年前

可以使用动画返回的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

Meenesh Jain Jasper Xu 11 年前

这可以用 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 11 年前

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

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