延迟淡化和淡出

问题描述 投票:4回答:1

我正在尝试创建一个对象列表并迭代淡入淡出它们。但是,每次页面加载时,它都会跳转到“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>
javascript jquery html
1个回答
6
投票

与你的代码一起使用的是$.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>
© www.soinside.com 2019 - 2024. All rights reserved.