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

在将新值推入数组之前，请尝试删除scope元素中的内容。 setInterval函数中的horosdisp不是必需的，因为您在调用函数时已经这样做，并尝试调整fadeOut间隔和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);

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

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

1 个答案: