Question

一旦第一个延迟淡化序列完成，就会调用第二个函数。

我有2个功能＆＃34; firstTime＆＃34;和＆＃34; loopTime＆＃34;如下所示，但只想要＆＃34; loopTime＆＃34;跑一次＆＃34; firstTime＆＃34;已经完成了。

安迪建议让这个工作？例如＆＃34; LOOPTIME＆＃34;应该在最后一次延迟淡入时调用＆＃34; firstTime＆＃34;完成 - 然后＆＃34; loopTime＆＃34;应该发挥它的序列并永远循环......

可能的？

function firstTime(callback) {

alert("firstTime")
$(".card h1").delay(5000).fadeIn(3500);
$(".card h1").delay(5000).fadeOut(3500);
$(".card h2").delay(17000).fadeIn(3500);
$(".card h2").delay(5000).fadeOut(3500);

return true;
}

function loopTime () {

alert("loopTime")
$(".card h1").fadeIn(3500);
$(".card h1").delay(5000).fadeOut(3500);
$(".card h2").delay(12000).fadeIn(3500);
$(".card h2").delay(5000).fadeOut(3500);    

}

firstTime(function () {
    loopTime();
});

Answer 1

请注意，如果您的动画属于同一元素，则可以对其进行链接。不需要单独的行。

使用回调作为上次运行（运行时间最长）动画的第二个参数：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/cL50uh1x/2/

function firstTime(callback) {
    $(".card h1").delay(5000).fadeIn(3500).delay(5000).fadeOut(3500);
    $(".card h2").delay(17000).fadeIn(3500).delay(5000).fadeOut(3500, callback);
}

function loopTime() {
    $(".card h1").fadeIn(3500).delay(5000).fadeOut(3500);
    $(".card h2").delay(12000).fadeIn(3500).delay(5000).fadeOut(3500, loopTime);
}

firstTime(loopTime);

对于loopTime，它只是在最后一个动画结束时自行调用。由于函数没有参数，只需引用它们而不调用它们（不需要匿名函数包装器）。这甚至适用于第一次调用firstTime：）

Answer 2

显然，需要更多时间的是

$(".card h2").delay(17000).fadeIn(3500);

所以你可以这样做

$(".card h2").delay(17000).fadeIn(3500,callback);

从jQuery fadeIn文档中，您可以将函数作为第二个参数传递给完成时调用的函数

http://api.jquery.com/fadein/

并使其循环第二个你可以使用setTimer

firstTime(function () {
//Every 2 seconds
   setInterval(function () {loopTime();}, 20000);
});

http://www.w3schools.com/js/js_timing.asp

Answer 3

在fadeIn和fadeOut中，您需要添加一个回调作为第二个参数。 Official documentation。对于循环部分，您可能需要查看setInterval()，here is the doc

function firstTime(callback) {

alert("firstTime")
$(".card h1").delay(5000).fadeIn(3500);
$(".card h1").delay(5000).fadeOut(3500);

// this call could be use to trigger the second function since it is the last completed call
$(".card h2").delay(17000).fadeIn(3500, function(){ setinterval(function() { loopTime () }, 100) } ); 

$(".card h2").delay(5000).fadeOut(3500);

return true;
}

另一种解决方案，您可能要考虑使用功能性的反应式插件。有bacon.js

仅在完成时从另一个函数调用函数

3 个答案: