Question

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

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

总结一下，如何使用淡入淡出来逐渐淡化为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的子DIV。并且getData.php始终返回记录1以后的所有数据。所以你最终得到的结果是：

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

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

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逐渐淡出

1 个答案: