Question

我遇到一个问题，在每个div有不同的延迟后，通过jQuery中的幻灯片效果显示三个内联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);
});

它的作用基本上是#left-service首先在包装器中间滑动，然后#middle-service幻灯片在包装器中间推动#left-service左侧，然后{ {1}}包装纸在中间滑动并移动到右侧。

以下是fiddle

Answer 1

将float: left添加到所有三个将解决问题。

以下是demo

您可以删除所有三个display: inline-block

的div's

CSS

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

jQuery效果重叠延迟+内联块

1 个答案: