Question

我需要将一组li项循环向上，而不是在每个循环之间有5000ms延迟的循环。我想顺利提升列表项目。

我的代码在开始时每隔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);

我无法弄清楚问题的原因是什么。请帮我解决这个问题。

感谢。

编辑：我做了一个小提琴，但没想过把它包含在我的问题中...... http://jsfiddle.net/654DX/2/。

Answer 1

function tick(){

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

//Call on page load
$(tick);

你在问题中编码的方式是产生大量的tick（），这就是你注意到加速的原因。以这种方式编码只允许一个tick（），因此每5秒产生一次效果。

Answer 2

每次执行tick也会再次执行setInterval！

你可以这样试试：

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

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

Answer 3

你需要你的元素到-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毫秒，因此4400毫秒（5000 - 600）什么都不会移动，并且会在时间缩短时移动。

修改：

根据我更新的评论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 4

我在脚本中注意到的最大错误是递归使用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 5

你可以这样做：

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

   },5000);
});

Answer 6

可能需要计算循环时间以确保动画完成。我的意思是这样的：

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

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

如何无限循环一个项目列表？

6 个答案: