延迟淡化和淡出

Question

我正在尝试创建一个对象列表并迭代淡入淡出它们.但是,每次页面加载时,它都会跳转到"Last Text".我假设它正在执行异步操作,并且刚刚在列表中闪现,因为控制台打印出所有值.我发现的每个解决方案都会得到相同的结果.

这是我到目前为止:

$(document).ready(function(){
  var resumation = [
    {value: "First Text", type: "text", top: 340, duration: 5},
    {value: "Second Text", type: "text", top: 340, duration: 5},
    {value: "Last Text", type: "text", top: 340, duration: 5}
  ];
  $("#ab-text").fadeOut(0);
  $.each(resumation, function(index, obj){
    console.log(obj.value);
    $("#ab-text").empty().append(obj.value).fadeIn(5000, function(){
      $("#ab-text").delay(3000).fadeOut(5000, function(){
        return;
      });
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ab-text"></div>

Answer 1

你的代码就是$.each不等不及的代码.它会立即遍历所有元素,您应该在控制台中看到您的.log语句.这意味着ab-text将几乎立即设置为所有不同的值,停在最后一个项目.

在动画完成后,您必须以某种方式调用下一个元素的动画.所以你认为正确的事情,但忘记了each.

通过next在每个动画完成后递归调用函数,这样的事情会更好.

$(document).ready(function(){
  var resumation = [
    {value: "First Text", type: "text", top: 340, duration: 5},
    {value: "Second Text", type: "text", top: 340, duration: 5},
    {value: "Last Text", type: "text", top: 340, duration: 5}
  ];

  next(0);

  function next (i) {
    var obj = resumation[i % resumation.length];
    $("#ab-text").empty().append(obj.value).fadeIn(5000, function () {
      $("#ab-text").delay(3000).fadeOut(5000, function(){
        next(i + 1);
      });
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ab-text"></div>