Question

我正在尝试创建一个一个接一个地显示帧的循环序列。

我已经使用jQuery .animate创建了这个例子。

$frame1.delay(0).animate({opacity: 1}, 0);
$frame1.delay(100).animate({opacity: 0}, 0);

这似乎工作一次。但是当我循环序列时，帧开始以错误的顺序跳转。

是否有人能够看到这里发生的事情以及我出错的地方？

See jsfiddle for full sequence

Answer 1

尝试创建一个设置为0的变量，该变量在单个递归函数中递增，以使用.frame，$.when()，.then()，{{为每个.eq()元素制作动画。 1}}

.fadeTo()

$(document).ready(function() {
  
  function walk(el, n) {
    // `el` : `$(".frame")` elements
    return $.when(
        el.eq(n).fadeTo(500, 1)
      ).then(function() {
        return this.fadeTo(500, 0)
      })
      .then(function() {
        // if `n` less than `$(".frame")` `.length` ,
        // call `walk`, else return `$(".frame")` : `el` elements
        return ++n < el.length ? walk(el, n) : el
      })
  };
  // pass `$(".frame")` , `0` to `walk`
  walk($(".frame"), 0).then(function() {
    // `this` : `.frame` elements
    console.log(this)
    alert("complete")
  });
  
});

.frame {
  position: absolute;
  background: red;
  color: #fff;
  top: 0px;
  padding: 20px;
  opacity: 0;
  z-index: 0;
  width: 50px;
  height: 50px;
}

jQuery .animate循环序列

1 个答案: