javascript - marginLeft 仅在调用两次时重置

Question

我已经创建了一个基本的旋转木马类型幻灯片，但是为了让它工作，我不得不调用以下函数两次，以便将 margin-left 属性实际设置为 0px。

$("#slide ul").stop().css('marginLeft', '0px');

我想知道我做错了什么，因为我是 jquery 的新手。

可以在这里找到全部内容 http://jsfiddle.net/xZBZK/

为方便起见，仅使用 JavaScript:

var offset = 0;
var count;
var width = 500;
var height = 333;
var interval;

$(document).ready(function() {
    count = $("#slide ul").children().length;
    // Add the first image to the end so it loops.
    $("#slide ul").children().first().clone().appendTo("#slide ul");
    start();
});

function nextImage() {
    $("#slide ul").stop();
    offset+=width;
    if(offset / width == count) { 
        $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700, 'linear', resetImage);
    }
    $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700);
    return offset;
}

function resetImage() {
    $("#slide ul").stop().css('marginLeft', '0px');
    $("#slide ul").stop().css('marginLeft', '0px');
    offset = 0;
    //start();
}

function stop() {
    clearInterval(interval);
}

function start() {
    interval = setInterval(nextImage, 3000);
}

我正在使用 JQuery 1.9.1

Answer 1

是不是因为你正在将两个动画加载到队列中？

if(offset / width == count) { 
    $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700, 'linear', resetImage);
}
$("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700);

也许你想要:

if(offset / width == count) { 
    $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700, 'linear', resetImage);
}else{
    $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700);
}

我认为 .stop() 只是停止当前的动画，并没有清除队列。所以它默认为它之前的动画。