marginLeft只有在被調用兩次時纔會重置

Question

我已經創建了一個基本的carousel類型slidingshow，但是爲了讓它起作用，我不得不調用以下函數兩次，以便將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()僅停止當前的動畫，不能清除隊列。所以它默認爲之前的動畫。