Question

我目前有一个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;
}

请帮忙！

Answer 1

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

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

或者甚至更好，您可以查看CSS3动画，甚至是承诺，例如：How do I animate in jQuery without stacking callbacks?

Answer 2

您可以将另一个函数传递给jQuery效果，该效果在我认为比大量嵌套超时更清晰的动画之后执行。

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

https://jsfiddle.net/34nqqjqv/

您也可以将此方法用于jQuery动画并传入回调。

Answer 3

与通常的做法一样，我建议使用回调或承诺，这样功能就会在它能够正常运行时没有等待下一次触发的停机时间。我使用的是超时功能，这对于动画和用户体验非常有用，但是如果你不在回调中放置超时，如果时间因任何原因而关闭，你可以从一个功能流向另一个功能。

这是回调方法。

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();

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

3 个答案: