Question

我在jQuery中编写了一个滑块。我希望有一个未知数量的盒子向上滑动，直到到达最后一个盒子，然后它向下滑动到第一个盒子并循环。我想自己编写并轻视jQuery。我的创作中遇到了障碍！

这里是jQuery：

function catslide() {
    var speed = 500;
    var delay = 1000;
    var move  = $j( "#Fader" ).height();
    for ( var i = 0; i < $j("div.slide").length; i++ )
    {
        $j( "#Fader .slide" ).first().delay(delay).animate({ 'margin-top':(move*i)*-1 }, speed);
    }
    catslide();
};
catslide();

JSFiddle中的

： http://jsfiddle.net/3nY4M/1/

它可以工作，但检查页面加载延迟！如果你推动＆＃34;运行＆＃34;在JSFiddle中，在Firefox选项卡中观看页面加载，您将看到页面停止加载几秒钟。在Chrome中，您只会看到额外的加载时间。删除顶部catslide();可以解决问题，但当然滑块不会循环。

我尝试了各种方法，包括检查幻灯片是否是for循环中的最后一个并添加回调，每个都有相同的结果。有什么想法吗？

Answer 1

我找到了答案，并更新了我的JSFiddle：http://jsfiddle.net/3nY4M/2/

具有回调的行：

$j( "#Fader .slide" ).first().delay(delay).animate({ 'margin-top':(move*i)*-1 }, speed, catslide);

运行代码时没有加载时间延迟。我之前（并且错误地）使用过此行：

$j( "#Fader .slide" ).first().delay(delay).animate({ 'margin-top':(move*i)*-1 }, speed, catslide());

（注意回调中的括号。）删除括号可以改善页面加载结束。

jQuery回调导致页面加载延迟

1 个答案: