jQuery效果與延遲+內聯塊重疊

Question

我有一個問題，顯示三個內聯div通過jQuery中的幻燈片效果後，每個div不同的延遲。

沒有不同的延遲，它工作正常，但延遲，divs在包裝div的中心與eachother重疊，然後神奇地顯示爲三個內聯div再次（效果發生後）。我不知道它是否因爲我的包裝div不夠寬或沒有。

這裏是我的jQuery代碼：

$(document).ready(function() { 
    $('#left-service').hide(); 
    $('#middle-service').hide(); 
    $('#right-service').hide(); 

    $('#left-service').delay(500).show('slide', { 
     direction: 'up' 
    }, 1000); 
    $('#middle-service').delay(1000).show('slide', { 
     direction: 'up' 
    }, 1000); 
    $('#right-service').delay(1500).show('slide', { 
     direction: 'up' 
    }, 1000); 
}); 

本質上講它是它的#left-service幻燈片首先在包裝的中間，那麼#middle-service幻燈片在包裝推#left-service左側的中間，然後#right-service包裝在中間滑動並移動到右側。

這裏是fiddle

Answer 1

添加float: left所有三個就能解決問題。

這裏是demo

可以刪除display: inline-block所有三個div's

CSS

#middleside, #rightside, #leftside { 
    float: left; 
}