Обновление массива для jQuery постепенно исчезает с помощью setInterval - PullRequest
Новая
       30

Обновление массива для jQuery постепенно исчезает с помощью setInterval

0 голосов
/ 26 апреля 2018

Я пытаюсь создать эффект постепенного появления / исчезновения элементов массива, которые меняются со временем. Массив будет обновляться функцией, которая ежечасно извлекает элементы массива из внешнего источника.

Проблема, с которой я столкнулся, заключается в плавной интеграции с функцией постепенного появления / исчезновения 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.

Спасибо!

1 Ответ

0 голосов
/ 26 апреля 2018

Попробуйте удалить содержимое элемента контекста, прежде чем вставлять новые значения в массив. 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);

Не пробовал, но вышеприведенные изменения должны работать. Счастливого обучения.

...