Javascript fadeTo 递增

Question

我使用下面的 javascript 递归地重新加载一个目标 DIV，其 id="outPut"，将参数传递给 getData.php 时执行数据查询的结果>。问题是 fadeTo 会淡化每次迭代调用返回的所有数据。

getData 格式化在其自己的 DIV 中返回的每一行数据，因此如果在给定的 selectData 迭代中调用了 10 条记录，并且在下一次 selectData 迭代之前没有添加新记录，则加载到 DIV“outPut”中的 10 个返回数据 DIV 不应全部消失和返回，而是保持明显不变。但是，如果在下一次 selectData 迭代之前添加了第 11 条记录，那么只有新的第 11 条记录的 DIV 应该淡入可见，加入之前存在的 10 个 DIV，所有这些都应该保持永久可见，因为它们在之前已经存在迭代。

总而言之，如何使用 fadeTo 逐渐淡化到 visibility 只有自上次调用以来的新内容？

function selectData()

{

    $("#outPut").load("getData.php?userid=" + userId + "&flow=" + flow + "&order=" + order).fadeTo(0,0).fadeTo(500,1);

    setTimeout(selectData, 2000);

    $.ajaxSetup
    (
        {
            cache:false
        }
    );
}

Answer 1

如果我没理解错的话，您的 getData.php 页面会返回已放入 DIV 元素中的记录，这些元素(通过 .load())然后成为你的主容器 div #outPut。 getData.php 总是返回从记录 1 开始的所有数据。所以你最终会得到类似的东西:

<div id="outPut">
  <div>Record 1</div>
  <div>Record 2</div>
</div>

假设是这种情况，那么在调用 .load() 之前，您可以检查当前有多少个子 DIV，然后是 .load()，然后淡化新的:

var $outPut = $("#outPut");
function selectData() {
  var count = $outPut.children("div").length;
  $outPut.load("getData.php?userid=" + userId + "&flow=" + flow + "&order=" + order,
    function() {
     $outPut.children("div").slice(count).fadeTo(0,0).fadeTo(500,1);
    }
  );

  setTimeout(selectData, 2000);
}

请注意，我已将淡入淡出代码移至 .load() 方法的完整回调中。