Question

我已经在这个网站上搜索了一个解决方案但是找不到可以提取的东西。

我有两个功能。第一个函数在多个元素中逐渐消失，直到每个元素都被淡入。现在我想在第一个函数完成第一个函数之后启动第二个函数。我已尝试使用.done()，.when()或.promise()，但可以找到解决方案。

（下面的小提示是简化以显示我的问题。我正在处理的网站更复杂，因此我需要一个解决方法，用于在函数之后调用函数而不是setTimeout()或其他东西。）

var v = $(".box");
var cur = 0;

var first = function () { 
    function fadeInNextLI() {
        v.eq(cur++).fadeIn(200);
        if(cur != v.length) setTimeout(fadeInNextLI,100);
    }
    fadeInNextLI();
    return $.Deferred().resolve();
};

var second = function () {
    alert('done');
};

first().done(second)

https://jsfiddle.net/c633f5w8/3/

非常感谢你。

Answer 1

我不想重写它，但你有一些必要的东西。它说明了fadeIn回调的使用。

https://jsfiddle.net/c633f5w8/4/

var v = $(".box");
var cur = 0;
var len = v.length;
console.log(len);
var first = function () { 
    function fadeInNextLI() {
        if(cur+1 == len){
            v.eq(cur++).fadeIn(200,'swing',finish);
        } else {
        v.eq(cur++).fadeIn(200);
              if(cur != v.length) setTimeout(fadeInNextLI,100);
        }
              /*
              this doesn't work
              if(cur === v.length) return $.Deferred().resolve();
              */
    }
    fadeInNextLI();
    return $.Deferred().resolve();
};

function finish() {
    alert('done');
};

first();

Answer 2

jQuery fadeIn已经允许链接功能。结构是这样的：

$().fadeIn(duration, function(){//this will be triggered once fadeIn is completed});

您可以使用递归函数链接您的fadeIn，并在每次fadeIn完成时验证是否应该淡入或调用其他函数。像这样：

    var v = $(".box");
    var cur = 0;

    fade_next($('.box:first-child'))

    var second = function () {
        alert('done');
    };

    function fade_next(cur) {
        cur.fadeIn(200, function () {
            if (cur.next().length) {
                fade_next(cur.next())
             } else {
                 second();
             }
         });
    }

小提琴：https://jsfiddle.net/rpnzz4mr/3/

Answer 3

我能找到的最简单的方法是计算div，然后在最终的div动画之后触发：

＆＃13;

var v = $(".box");
var cur = 0;

var first = function () { 
	function fadeInNextLI() {
        v.eq(cur++).fadeIn(200).promise().then(cur == $('div').length ? second : function(){});
			  if(cur != v.length) setTimeout(fadeInNextLI,100);
              /*
              this doesn't work
              if(cur === v.length) return $.Deferred().resolve();
              */
	}
	fadeInNextLI();
    return $.Deferred().resolve();
};

second = function () {
    alert('done');
};

first();

＆＃13;

.box{
    height:50px;
    width:50px;
    background-color:#000;
    margin-bottom:5px;
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

＆＃13;

Answer 4

尝试使用.delay()，.promise()，$.when()，$.map()

$.when.apply($, $.map($(".box"), function fadeInNextLI(el, index) {
  return $(el).delay(100 * index, "fx").fadeIn(200 * index).promise("fx");
})).then(function() { 
  alert("done");
});

.box {
    height:50px;
    width:50px;
    background-color:#000;
    margin-bottom:5px;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

jsfiddle https://jsfiddle.net/c633f5w8/8/

在＆＃34;循环＆＃34;之后调用函数多个元素的函数在jQuery中完成

4 个答案: