javascript - 如何循环多个 jQuery 函数

Question

我试图将这些函数循环在一起，以便在最后一个函数完成时重播，但我无法弄清楚如何做。

$(document).ready(function() {
  setTimeout(function() {
    $('#main').animate({
      height: 70,
      width: 300
    }, 200);
  }, 500);
  setTimeout(function() {
    $('#main').animate({
      height: 350,
      width: 350
    }, 200)
    $(".title").css("display", "none")
    $(".1").css("display", "block");
  }, 1000);
  setTimeout(function() {
    $('#main').animate({
      height: 150,
      width: 350
    }, 200)
    $(".title").css("display", "none")
    $(".1").css("display", "none")
    $(".2").css("display", "block");
  }, 1500);
  setTimeout(function() {
    $('#main').animate({
      height: 70,
      width: 300
    }, 200)
    $(".title").css("display", "none")
    $(".1").css("display", "none")
    $(".2").css("display", "none")
    $(".3").css("display", "block");
  }, 2000);
});

#main {
  width: 0px;
  height: 70px;
  background-color: #000000;
  position: absolute;
  left: 70px;
  top: 50px;
}

.styled {
  color: #ffffff;
  font-size: 24px;
  font-family: arial;
  position: absolute;
  left: 20px;
  top: 20px;
}

.social {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main" class="banner">
  <div class="styled title">name.</div>
  <div class="styled social 1">/1</div>
  <div class="styled social 2">/2</div>
  <div class="styled social 3">/3</div>
</div>

Answer 1

将所有代码都放在一个函数中，并使最后一个函数的回调成为根函数的函数调用。

function myFunction(){
  setTimeout(function() {
    $('#main').animate({
      height: 70,
      width: 300
    }, 200);
  }, 500);
  setTimeout(function() {
    $('#main').animate({
      height: 350,
      width: 350
    }, 200)
    $(".title").css("display", "none")
    $(".1").css("display", "block");
  }, 1000);
  setTimeout(function() {
    $('#main').animate({
      height: 150,
      width: 350
    }, 200)
    $(".title").css("display", "none")
    $(".1").css("display", "none")
    $(".2").css("display", "block");
  }, 1500);
  setTimeout(function() {
    $('#main').animate({
      height: 70,
      width: 300
    }, 200)
    $(".title").css("display", "none")
    $(".1").css("display", "none")
    $(".2").css("display", "none")
    $(".3").css("display", "block");

    myFunction();
  }, 2000);
}

最后，您需要在第一次调用它时使用它。

$(document).ready(function(){
    myFunction();
});