javascript - jQuery轮播下一个元素不滑入

Question

请参阅此 fiddle :http://jsfiddle.net/r0mvyLmx/

我必须从头开始编写一个简单的 jQuery 水平旋转木马，但我无意中遇到了以下问题:当按下下一个按钮时，当前元素会很好地滑出 View ，但下一个元素不会滑入。它仅在前一个元素完全不可见后才会显示。如果你不明白我的意思，这就是我想要的效果: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。在旋转木马的内层 wrapper 上，我给它设置了与外层 wrapper 相同的宽度，并且幻灯片不是内联显示，而是 block 状显示，因此它们无法一个接一个地流动。我已经为对此问题感兴趣的任何人更新了 fiddle :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');
});