jQuery效应与延迟重叠+；内联块

我在jQuery中通过幻灯片效果显示三个内联div时遇到了一个问题，每个div延迟不同

没有不同的延迟，它工作正常，但有了延迟，两个div在环绕div的中心相互重叠，然后神奇地再次显示为三个内联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);
});

基本上它是“代码”>左边的服务< /代码>首先在包装器的中间滑动，然后<代码>中间服务幻灯片在包装器的中间滑动，推动<代码>左服务左，然后<代码>右服务> /COD>包装器在中间滑动，移动到右侧。

---

以下是将

float:left

添加到所有三个选项中的将解决此问题

这是你的电话号码

您可以删除所有三个

div的
display:inline块

CSS

你能分享JSFIDLE或codpen演示吗？抱歉，刚刚做了。在原始问题中。你可以看到它们在每次滑动之前是如何重叠的。我在想，为了达到这个目的，把div放在一个表中而不是让它们保持内联会更好吗？
#middleside, #rightside, #leftside {
    float: left;
}