Question

我创建了一个基本的轮播类型slidshow，但为了让它工作，我必须调用以下函数两次才能实际将margin-left属性设置为0px。

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

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

找到整件事

为方便起见，只是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()仅停止当前动画并且不清除队列。所以它默认为它之前的动画。

marginLeft仅在被调用两次时才会重置

1 个答案: