jquery - 循环 jquery fadeIn() fadeOut() 的问题

Question

我正在努力让这个循环工作。

我有两个 Logo 都位于我正在处理的网站的登录页面上。我尝试对循环进行编码，因此当一张图片 fadesOut() 另一张图片 fadesIn() 但它不起作用时。

我尝试使用 setInterval() 但图像开始一个接一个地出现。如果我延迟一张图片，那么它会在另一张图片结束时开始播放动画，对象的位置会发生一些变化，并且它会显示为非居中。

这是我的代码:

$(document).ready(function() {

  function somethingfade() {

    $(".logo1").fadeIn(1000).delay(3000).fadeOut(1000);

    $(".logo2").delay(6500).fadeIn(1000).delay(3000).fadeOut(1000);
    $(".logo1").delay(7000).fadeIn(1000);

  }
  somethingfade();
});

.container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.logocontainer {
  display: block;
  height: 9rem;
  margin: 1rem;
}

.logo1 {
  position: absolute;
  display: none;
  height: 9rem;
  margin: 1rem;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.logo2 {
  position: absolute;
  display: none;
  height: 9rem;
  margin: 1rem;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <div class="logocontainer">

    <img class="logo1" id="logoChange" src="https://via.placeholder.com/150/?text=logo1" alt="logo1">

    <img class="logo2" id="logoChange" src="https://via.placeholder.com/150/?text=logo2" alt="logo2">

  </div>

谢谢!

Answer 1

fadeIn 和 fadeOut 是异步函数。您需要使用回调来使动画看起来同步:

$(document).ready(function() {
  function somethingfade() {
    $(".logo1").fadeIn(1000, function() {
      $(this).delay(3000).fadeOut(1000, function() {
        $(".logo2").delay(6500).fadeIn(1000, function() {
          $(this).delay(3000).fadeOut(1000, function() {
            $(".logo1").delay(7000).fadeIn(1000);
          });
        })
      })
    });
  }

  somethingfade();
});

.container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.logocontainer {
  display: block;
  height: 9rem;
  margin: 1rem;
}

.logo1 {
  position: absolute;
  display: none;
  height: 9rem;
  margin: 1rem;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.logo2 {
  position: absolute;
  display: none;
  height: 9rem;
  margin: 1rem;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="logocontainer">
    <img class="logo1" id="logoChange" src="_css/_images/UshuaiaLocals_Single.png" alt="logo 1">
    <img class="logo2" id="logoChange" src="_css/_images/UshuaiaLocals_Single_Coord.png" alt="logo 2">
  </div>
</div>