如何在 Javascript 中使一组函数在另一组函数之后出现

How do you make one set of functions occur after another set in Javascript?

本文关键字：一组 函数 之后 Javascript      更新时间：2023-09-26

我目前有一个Javascript块作为我网站的介绍： 

$('.welcome').fadeIn(500);
    }, 3600)
    setTimeout(function() {
        $('.welcome').fadeOut(500);
    }, 5100)
    setTimeout(function() {
        $('.quotable').fadeIn(800);
    }, 5600)
    setTimeout(function() {
        $('.quotable').animate({
            "margin-top" : 0,
            "font-size" : '20px'
        }, 2000)
    }, 6000)
    setTimeout(function() {
        $('.quotable').fadeOut(1500);
    }, 7000)

我试图让下一个代码块（即主页）在完成后运行：

$('.nav').fadeIn(1500)
$('#background').fadeIn(1500)
    setTimeout(function() {
        $('#background').fadeOut(1500);
    }, 8000)
    setTimeout(function() {
        $('#background2').fadeIn(1500);
    }, 8000)

我尝试进行回调，但没有用。

这是 HTML：

<div class="welcome">welcome to</div>
<div class="quotable">the quotable</div>

<div class = "images">
<div id="background">
  <img src="Image1.jpg" alt="">
</div>
<div id="background2">
  <img src="Image2.jpg" alt="">
</div>
</div>

<div class = "nav">
    <ul>
        <li class="left"><a href="#" class="quotes">Quotes</a>
            <ul class="menu">
                <li id="philosophy"><a href="#">Philosophy</a>
                </li>
                <li id="love"><a href="#">Love</a>
                </li>
            </ul>
        </li>
        <li class="right"><a href="#">About</a></li>
    </ul>
</div>

和 CSS：

.welcome {
  color: black;
  font-family: Copperplate;
  position: absolute;
  font-size: 60px;
  z-index: 3;
}
.quotable {
  color: black;
  font-family; Copperplate;
  position: absolute;
  font-size: 60px;
  z-index: 4;
}
#background {
 position: fixed;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%; 
}
#background img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}
#background2 img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}
.nav {
    background: #333;
    font-size: 15px;
    color: #000000;
    margin: 0;
    width: 100%;
    position:fixed;
    bottom: 0;
    list-style-type: none;
    opacity: 0.75;
    padding: 0;
    z-index: 150;
}
.nav ul, li, a {
    margin: 0;
    padding: 0;
    z-index: 150;
}
.nav li {
    list-style: none;
    z-index: 150;
}

 ul > li {
    float: left;
    z-index: 150;
}
.nav ul > li a {
    color: #fff;
    font-weight: bold;
    line-height: 40px;
    height:40px;
    display:block;
    padding:0px 10px;
    z-index: 150;
}
.nav a:hover {
    background-color: #111;
    color: white;
    text-decoration: none;
    z-index: 150;
}

请帮忙！

您可以使用相对 setTimeout，如下所示：

$(element).fadeOut(1500, function() {
   setTimeout(function() { 
       $(nextElement).fadeOut(500, function() ...
   }, 500); //do next animation in .5 seconds
}

或者更好的是，你可以查看 CSS3 动画，甚至是承诺，比如这个问题：如何在不堆叠回调的情况下在 jQuery 中进行动画处理？

您可以将另一个函数传递给在动画之后执行的 jQuery 效果，我认为这比很多嵌套超时更干净。

$("h1").fadeIn('slow', function() {
    $("h2").fadeIn("slow", function() {
       $("h3").fadeIn("slow");
    });
});

https://jsfiddle.net/34nqqjqv/

您还可以将此方法用于 jQuery animate 并传入回调。

与常见做法一样，我建议使用回调或承诺，以便函数在能够运行时立即运行，并且您没有等待下一个触发器的停机时间。我您使用超时，这对于动画和UX非常有用，但是如果您不将超时放在回调中，如果由于任何原因计时关闭，则可能会从一个函数流血到另一个函数。

这是回调方法。

step1(function (value1) {
    step2(value1, function(value2) {
        step3(value2, function(value3) {
            step4(value3, function(value4) {
                // Do something with value4
            });
        });
    });
 });

这是承诺方法。（要使承诺起作用，您将需要一个像q这样的库）

Q.fcall(promisedStep1)
.then(promisedStep2)
.then(promisedStep3)
.then(promisedStep4)
.then(function (value4) {
    // Do something with value4
})
.catch(function (error) {
    // Handle any error from all above steps
})
.done();
相关文章：