使用 setInterval 更新 jQuery 淡入和淡出的数组

Question

我正在尝试使用随时间变化的数组元素创建淡入/淡出效果。数组将由每小时从外部来源获取数组项的函数更新。

我遇到的问题是无缝集成到 jQuery 淡入/淡出功能。

目前，我已尝试使用 setInterval，但我认为这不是最好的方法。淡入淡出的元素随着整个函数的每次重复而开始重叠。

这是我一直在做的事情： https://jsfiddle.net/gan5dt1n/

var h = document.createElement('html');

function horofunc() {
  item1 = new Date();
  item2 = new Date().getHours();
  item3 = new Date().getMinutes();
  item4 = new Date().getSeconds();
  item5 = "Line 5";
  dhsplit = [item1, item2, item3, item4, item5];
  console.log(dhsplit)

  for (i = 0; i < dhsplit.length - 1; i++) {
    var line = document.createElement("div");
    line.className = "line";
    var node = document.createTextNode(dhsplit[i]);
    line.appendChild(node);
    var element = document.getElementById("scope");
    element.appendChild(line);
  }

}


function horosdisp() {
  $(function() {
    $('#scope div:gt(0)').hide();
    setInterval(function() {
        $('#scope :first-child').fadeOut(200)
          .next('div');
        $('#scope :first-child').fadeOut(200)
          .next('div').fadeIn(200);
        $('#scope :first-child').fadeOut(200)
          .next('div').end().appendTo('#scope');
      },
      1500);
  });
}


horofunc();
horosdisp();
setInterval(horofunc, 10000); //0*60*6);
setInterval(horosdisp, 5000);

我是 JS 的初学者，我意识到解决方案可能很明显。 代码可能非常混乱，但目前我只是想把东西拼接在一起，这样它就可以工作了。请原谅代码中的任何冗余，我还在学习JS的基础知识。

谢谢！

Answer 1

在将新值推入数组之前，请尝试删除范围元素中的内容。 horosdisp 函数中的 setInterval 不是必需的，因为您在调用函数时已经这样做了，并尝试调整淡出间隔和 setInterval 毫秒，以便过渡看起来平滑。

var h = document.createElement('html');

function horofunc() {
var element = document.getElementById("scope");
element.innerHTML='';
  item1 = new Date();
  item2 = new Date().getHours();
  item3 = new Date().getMinutes();
  item4 = new Date().getSeconds();
  item5 = "Line 5";
  dhsplit = [item1, item2, item3, item4, item5];
  console.log(dhsplit)

  for (i = 0; i < dhsplit.length - 1; i++) {
    var line = document.createElement("div");
    line.className = "line";
    var node = document.createTextNode(dhsplit[i]);
    line.appendChild(node);

    element.appendChild(line);

  }

}


function horosdisp() {
   $(function() {
    $('#scope div:gt(0)').hide();

        $('#scope :first-child').fadeOut(200)
          .next('div');
        $('#scope :first-child').fadeOut(200)
          .next('div').fadeIn(200);
        $('#scope :first-child').fadeOut(200)
          .next('div').end().appendTo('#scope');
      }
  );
}


horofunc();
horosdisp();
setInterval(horofunc, 3600); //0*60*6);
setInterval(horosdisp, 1200);

没有尝试，但上述更改应该有效。 快乐学习。