jQuery轮播下一个元素不滑入

Question

看到这个小提琴：http://jsfiddle.net/r0mvyLmx/

我必须从头开始编写一个简单的 jQuery 水平轮播，但我偶然发现了以下问题：当按下下一个按钮时，当前元素滑出视图就好了，但下一个元素没有滑入。它仅在前一个元素完全看不见后才会显示。如果你还没有看懂，这就是我想要的效果：http://jsfiddle.net/yvD5S/（下一张和上一张幻灯片同时滑动）。

这是我的代码：

    $('#carousel-outer button:last').on('click', function () {
        var slide = $('#carousel-inner .item.active');

        slide.animate({'margin-left':'-480px'},2000,function() {
            slide.css({ 'margin-left': 0 });
            slide.parent().find('div:last').after(slide);
            slide.removeClass('active');
            slide.parent().find('div:first').addClass('active');
        });
    });

Answer 1

哎呀，这个问题原来很简单。错误的不是 jQuery，而是 CSS。在旋转木马的内包装上，我给了它与外包装相同的宽度，幻灯片没有显示为内联，而是块状，因此它们不能一个接一个地流动。我已经为对此问题感兴趣的人更新了小提琴：http://jsfiddle.net/r0mvyLmx/1/。 JS 中也有一个小改动，以便将非活动元素保留为 display:none。

CSS：

#carousel-outer {
    width: 480px;
    margin: 0 auto;
    overflow: hidden;    
}

#carousel-inner {
    width: 1600px;
    height: 200px;
    overflow: hidden;
}

jQuery 变化：

$('#carousel-outer button:last').on('click', function () {
    var slide = $('#carousel-inner .item.active');

    slide.next().addClass('active');
    slide.animate({'margin-left':'-480px'},2000,function() {
        slide.css({ 'margin-left': 0 });
        slide.parent().find('div:last').after(slide);
        slide.removeClass('active');
});