Как петля список элементов бесконечно?

Question

Мне нужно закодировать набор элементов li, как петлю вертикально вверх, без конца с задержкой 5000 мс между каждым циклом. Я хочу также легко перемещать элементы списка.

Мой код запускает цикл каждые 5000 мс в начале, но он не перемещает элементы вверх плавно. И после нескольких итераций цикла он работает очень быстро.

Вот код jquery, который я пытаюсь.

function tick(){ 
    $('#itemflowslider ul li').animate({top:"-225px"},"slow"); 
    $("#itemflowslider ul li:first").appendTo("#itemflowslider ul"); 

    setInterval(function(){ tick() }, 5000); 
} 

//Call on page load 
$(tick); 

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

Спасибо.

EDIT: Я сделал скрипку, но не подумал включить ее в мой вопрос ... http://jsfiddle.net/654DX/2/.

Answer 1

Самая большая ошибка, которую я заметил в сценарии является рекурсивным использование setInterval. Действительно, setInterval повторно вызывает переданную функцию (в отличие от setTimeout), поэтому каждые 5 секунд количество вызовов увеличивается экспоненциально (1, 2, 4 ...). Другими словами, каждые 5 секунд setInterval звонит setInterval, что делает то же самое и так далее ...

Тогда, я думаю, вы хотели вычесть 225 пикселей из исходного положения, вместо того, чтобы идти в эту позицию. В случае, если я прав, замените -225px на -=225px.

Наконец, я бы предпочел подождать, пока все анимации не будут выполнены, прежде чем перемещать первый элемент в конец списка (помните, что animate применяется к каждому элементу отдельно).

Все исправления вместе:

$(function tick() { 
    var h = $('li:first').outerHeight(true); 
    var anim = $('li').animate({ top: '-=' + h + 'px' }, 'slow'); 
    $.when(anim).done(function() { 
     $('li:first').appendTo('ul'); 
     $('li').css('top', 'auto'); 
     setTimeout(tick, 5000); 
    }); 
}); 

Я сделал что-то подобное: http://jsfiddle.net/wared/GJvLw/.

Answer 2

function tick(){ 

    setInterval(function(){ 
     $('#itemflowslider ul li').animate({top:"-225px"},"slow"); 
     $("#itemflowslider ul li:first").appendTo("#itemflowslider ul"); 
    }, 5000); 
} 

//Call on page load 
$(tick); 

как вы его закодирован в вопросе будет порождать много и много клеща(), поэтому вы заметите скорость вверх. Его кодирование таким образом позволяет использовать только один тик() и, таким образом, будет давать эффект один раз каждые 5 секунд.

Answer 3

каждый раз выполнять тик также выполнить setInterval снова!

и можно попробовать так:

function tick() { 
    $('#itemflowslider ul li').animate({top:"-225px"},"slow"); 
    $("#itemflowslider ul li:first").appendTo("#itemflowslider ul"); 
} 

$(function(){ 
    setInterval(tick, 5000); 
}); 

Answer 4

и может сделать что-то вроде этого:

$(document).ready(function(){ 
    setInterval(function(){ 
     $('#itemflowslider ul li').animate({top:"-225px"},"slow"); 
     $("#itemflowslider ul li:first").appendTo("#itemflowslider ul"); 

    },5000); 
}); 

Answer 5

Вам нужен элемент переходит в -225px положение или движется каждый тик на 225px верхней? Если второе, то вам нужно -=225px, и код будет:

function tick() { 
    var $elems = $('#itemflowslider ul li'); 

    if ($elems.position().top < 225) { 
     $elems.animate({top: 0 }, "slow"); 
     return; 
    } 

    $elems.animate({top: "-=225px"},"slow"); // slow means = 600 ms! 
    $("#itemflowslider ul li:first").appendTo("#itemflowslider ul"); 

    setTimeout(tick, 5000); // start tick again 
} 

$(document).ready(function(){ 
    tick(); // start loop 
}); 

Slow = 600 мс, так 4400ms (5000 - 600) ничего не будет двигаться, и будет идти, когда это время elasped.

EDIT:

Согласно комментариям я обновил fiddle

function tick() { 

    var $ul = $('#itemflowslider ul'); 
    var $li1 = $ul.find("li").first(); 

    $ul.append($li1.clone()); 
    $li1.css({ 
     height: '1em', 
     visibility: 'hidden' 
    }) 
    .animate({height: 0}, 'slow', function(){ 
     $(this).remove(); 
    }); 

    setTimeout(tick, 5000); // start tick again 
} 

$(tick); 

Answer 6

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

$(function(){ 
    tick(); 
}); 

function tick(){ 
    $('#itemflowslider ul li').animate({top:"-225px"}, 'slow', function(){ 
     $("#itemflowslider ul li:first").appendTo("#itemflowslider ul"); 
     setInterval(tick, 5000); 
    }); 
}