循环问题 jquery fadeIn() fadeOut()

Question

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

我有两个徽标都位于我正在处理的网站的登录页面上。我尝试编写循环代码，所以当一张图片 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>

循环问题 jquery fadeIn() fadeOut()

Trouble with loop jquery fadeIn() fadeOut()

css

jquery

loops

css-position