JavaScript setInterval будет запускать только jQuery

92
11

У меня есть скрипка здесь: http://jsfiddle.net/justinboyd101/4nrbb/

Вот мой вопрос:

Почему моя функция console.log и мой оператор добавляют html к рабочему div, а он не работает на моей другой функции jQuery для цикла?

Подробнее см. Ниже:

Я пытаюсь создать тикер новостей с помощью setInterval. Предполагается, что анимация будет перемещать текст с правой стороны экрана, затем нажмите вниз, а затем верните исходное положение. По какой-то причине он будет запускать анимацию только один раз. Я создал простую функцию, где когда-либо интервал собирает информацию из массива и добавляет ее в пустой div.

Вот мой код, если вы не хотите идти в jsfiddle:

HTML

<div id="newsValueText" class="newsValueText floatLeft darkBlue">
<ul id="newsTicker" class="newsTicker">
<li name="tick" ph="tick1">We have in-store technical support.</li>
<li name="tick" ph="tick2">Option 2</li>
<li name="tick" ph="tick3">Option 3</li>
<li name="tick" ph="tick4">Option 4</li>
<li name="tick" ph="tick5">Option 5</li>
<li name="tick" ph="tick6">Option 6</li>
</ul>
</div>
<div id="log"></div>

JS

//Get the ticker elements
var tickText = document.getElementById('newsTicker').getElementsByTagName('li');
var tickNum = tickText.length;
//New Array to clear empty data
var tickArry = [];
//Loop through list items and add non-void data to new loop
for(var a = 0; a < tickNum; a++) {
if ($(tickText[a]).html() != '') {
tickArry.push($(tickText[a]));
}
}
//Loop int
var i = 0;
var log = document.getElementById('log');
//Self-invoking function for ticker animation
function animTick() {
console.log($(tickArry[i]));
log.innerHTML += $(tickArry[i]).html();
//Make current tick item fall down
$(tickArry[i]).animate({'padding-top' : '+=50px'}, 500,
function() {
//Once tick item is off screen, reset values
$(this).css({'margin-left' : '9999px', 'padding-top' : '0'});
});
//Increment item
i++;
//If the tick has reach its length then reset
if (i === tickNum) {
i = 0;
//Else call the animation for the next tick
}
}
//Immediately animate in first list item
$(tickArry[i]).animate({'margin-left' : '0px'}, 2000);
//Add a delay
setInterval(animTick, 3000);

спросил(а) 2021-01-19T17:56:03+03:00 9 месяцев, 1 неделя назад
1
Решение
112

Используйте setTimeout() если вы рекурсивно вызываете одну и ту же функцию.

Альтернативой setInterval() будет:


function animTick() {
// Function definition
}

setInterval(animTick, 3000);

ответил(а) 2021-01-19T17:56:03+03:00 9 месяцев, 1 неделя назад
46

Что делать, если вы включили $(tickArry[i]).animate({'margin-left': '0px'}, 2000); внутри вашей функции animTick?

Демо: скрипка

ответил(а) 2021-01-19T17:56:03+03:00 9 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема