jQuery 带有 setInterval() 的动画

Question

我对动画的停顿和看似不稳定的行为感到困惑。停顿时间超过 2000 毫秒，动画跳得比我想要的更远。

function myFunction() {
    myVar = setInterval(slideit, 2000);
}

我想运行每 2 秒（或 6 秒，但为了测试，我将使用 2 秒）的动画序列，但结果似乎有点奇怪。

我做错了什么？

我知道我不需要动画回调，但是当 window 最小化时整个事情就不同步了，所以我希望使用回调可以防止这种情况发生。

var myVar;
var countit;
countit = 1;

function myFunction() {
  myVar = setInterval(slideit, 2000);
}

function slideit() {
  $(".bannertext").animate({ // Text out
    opacity: 0,
    "left": "-200px"
  }, 500, function() {
    $(".imgcontainer").animate({ // Next  Image
      "top": -($(".imgcontainer").height() * countit)
    }, 500, function() {
      $(".bannertext").animate({ // Text in
        opacity: 1,
        "left": "-20px"
      }, 500);
    });
  });


  countit = countit + 1;
  if (countit == $(".imgcontainer").length) {
    countit = 1;
  }
}

myFunction();

#banner {
  background: url(img/rauch-klein.jpg);
  overflow: hidden;
  height: 350px;
  background-size: cover;
}
#subbanner {
  width: 800px;
  margin: 0 auto;
}
#banner .imgcontainer {
  position: relative;
  text-align: left;
  height: 350px;
}
#banner img {
  height: 100%;
  vertical-align: middle;
  position: absolute;
  left: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="banner">
  <div id="subbanner">
    <div class="imgcontainer">
      <div class="bannertext">Absaugarm 150mm</div>

      <img src="img/units/absaugarm.png" style="vertical-align:middle;">
    </div>
  </div>
  <div id="subbanner">
    <div class="imgcontainer">
      <div class="bannertext">Absaugarm 200mm</div>

      <img src="img/units/absaugarm-200mm.png">
    </div>
  </div>
  <div id="subbanner">
    <div class="imgcontainer">
      <div class="bannertext">Absaugkran</div>

      <img src="img/units/absaugkran.png">
    </div>
  </div>
  <div id="subbanner">
    <div class="imgcontainer">
      <div class="bannertext">Absaugtisch</div>

      <img src="img/units/absaugtisch.png">
    </div>
  </div>
  <div id="subbanner">
    <div class="imgcontainer">
      <div class="bannertext">AIRTECH P10</div>

      <img src="img/units/Airtech_P10.png">
    </div>
  </div>
  <div id="subbanner">
    <div class="imgcontainer">
      <div class="bannertext">AIRTECH P30</div>

      <img src="img/units/Airtech_P30.png">
    </div>
  </div>
  <div id="subbanner">
    <div class="imgcontainer">
      <div class="bannertext">BlowTec</div>

      <img src="img/units/BlowTec.png">
    </div>
  </div>

Answer 1

来自Jquery docs：

If multiple elements are animated, the callback is executed once per matched element, not once for the animation as a whole

这意味着为每个 bannertext class 元素调用完整的函数。如果您不想只淡出特定元素，最快的解决方案是在回调函数中引用 this 。

function slideit() {

  var cnt = countit;
  $(".bannertext").animate({ // Text out
    opacity: 0,
    "left": "-200px"
  }, 500, function() {
    $(this).parent().animate({ // Next  Image
      "top": -($(".imgcontainer").height() * cnt)
    }, 500, function() {
      $(this).children(".bannertext").animate({ // Text in
        opacity: 1,
        "left": "-20px"
      }, 500);
    });
  });

  countit = countit + 1;
  if (countit == $(".imgcontainer").length) {
    countit = 1;
  }
}

jsfiddle example.

（另一个副作用是 countit 立即增加。在正常执行中，它会在执行第一个完整回调之前增加。这就是为什么也使用临时变量 cnt 的原因）

jQuery 带有 setInterval() 的动画

jQuery animation with setInterval()

javascript

jquery

animation