Javascript 逐渐淡入淡出

Question

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

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

总结一下，如何使用 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 页面 returns 记录已被放入 DIV 元素中（通过 .load()）然后变成 child DIV 主容器 div #outPut。并且 getData.php 总是 returns 从记录 1 开始的所有数据。所以你最终会得到类似的东西：

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

假设是这样，那么在调用.load()之前，你可以检查当前有多少child 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() 方法的完整回调中。

Javascript 逐渐淡入淡出

Javascript fadeTo Incrementally

javascript

css

php

jquery

fadeto