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/ 。 為了使不活動的元素與display：none保持一致，JS中也進行了較小的更改。

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');
});