Question

我正在尝试将这些功能循环在一起，以便在最后一个完成时重放，但我无法弄清楚如何。

#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>

error TS2304: Cannot find name '$'.

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

如何循环多个jQuery函数

1 个答案: