Question

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

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

我希望每2秒运行一系列动画（或者相当于6秒，但是对于测试我会选择2）但结果似乎有些奇怪。

我做错了什么？

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

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：

如果动画了多个元素，则每次执行一次回调匹配的元素，不是整个动画的一次

这意味着为每个bannertext类元素调用complete函数。如果您不想仅淡出特定元素，则最快的解决方案是在回调函数中引用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的原因）

setInterval（）的jQuery动画

1 个答案: