Question

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

这是我到目前为止所做的：

＆＃13;

$(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;
      });
    });
  });
});

＆＃13;

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

＆＃13;

Answer 1

与您的代码相关的是$.each不会等待任何事情。它会一次遍历所有元素，您应该在控制台中看到.log语句。这意味着ab-text几乎会立即设置为所有不同的值，停在最后一项。

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

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

＆＃13;
＆＃13;
$(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); }); }); } });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ab-text"></div>
＆＃13;
＆＃13;
＆＃13;

延迟淡化和淡出

1 个答案: