Question

此代码每10秒刷新一个div中包含的表格：

setInterval(function(){
    $( '#allCases' ).fadeOut(500).load(window.location.href + ' #allCases' ).fadeIn(2000);
}, 10000);

刷新工作正常，淡入淡出效果很好，但它们不同步。发生淡入淡出，然后新数据在2秒后闪烁。我希望新数据逐渐消失。

Answer 1

如果您设置了时间间隔，则必须将其删除。然后只有它才能完美，否则书会无限调整......你要做的就是。你需要将时间间隔函数分配给变量，然后在那里的时间间隔之前检查它。如果有，那么删除它..

例如： If（id）clearTimeout（id）; var id = setInterval（function（）{ $（'＃allCases'）。load（window.location.href +'＃allCases' ）.fadeIn（2000）; }，10000）;

Answer 2

将加载的数据隐藏在比内容更高z-index的绝对定位元素中。使用内容#newCases交叉淡化此新元素#allCases并交换其ID属性以完成循环。

快速举例：

＆＃13;

$(function() {
  setInterval(function() {
    $('#allCases').attr('id', 'oldCases');
    $('#newCases').load(window.location.href + ' #allCases', function(){
      $(this).hide().fadeIn(800, function() {
        $('#allCases').unwrap();
        $('#oldCases').attr('id', 'newCases').empty();
      });
    });
  }, 10000);
});

＆＃13;

.container {
  position: relative;
}

#oldCases {
  position: relative;
  z-index: 0;
}

#allCases {
  position: relative;
  z-index: 1;
}

#newCases {
  position: absolute;
  z-index: 2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Container for positioning -->
<div class="container">

  <!-- Normal content -->
  <div id="allCases">The content goes here</div>

  <!-- New content is loaded in here -->
  <div id="newCases"></div>

</div>

＆＃13;

注意：在上面的代码段结果中，.load()将不返回任何内容，因为window.location.href + ' #allCases'特定于您的项目。

刷新div和FadeIn新结果

2 个答案: