Question

尽管我们认为解决方案非常简单，但我们已经完成了这个问题。

我们有一个响应容器div，宽度为100％，溢出：隐藏。这个容器有一个居中的边距0 auto div'A'，固定宽度为950px。

我们希望在此容器旁边放置一个最大宽度的容器“B”，右侧为：-3000px，将其放在屏幕外。

然后我们将使用jQuery来设置不透明度的动画：0表示第一个容器，右边是动画：0px第二个容器，从屏幕右侧很好地显示它。

然而，容器B不会排列在容器A旁边。它放在第一个容器的右下方。

我们需要做什么才能让容器B在容器A旁边排队？

提前感谢您的帮助！这是代码：

HTML：

<div id="container">
    <div id="A">Some content</div>
    <div id="B">Some content</div>
</div>

CSS：

#container {
    float: left;
    overflow: hidden;
    width: 100%;
}
#A {
    margin: 0 auto;
    max-width: 950px;
    position: relative;
}
#B {
    max-width: 715px;
    padding-left: 220px;
    position: relative;
    right: -3000px;
    z-index: 999;
}

Answer 1

将#B div的位置更改为position:absolute;

Answer 2

Demo here

<div id="container">
    <div id="A">A Some content</div>
    <div id="B">B Some content</div>
</div>

<script type="text/javascript">
$( "#B" ).animate({
    right: 0,
    opacity: 1

}, 1500, "linear", function() {
        alert( "all done" );
});
</script>

<style type="text/css">
#container {
    overflow: hidden;
    width: 100%;
    height:50px;
    position:relative;
    background-color:orange;
}
#container > div {
    position:absolute;
}
#A {
    top:0;left:0;
    margin: 0 auto;
    max-width: 950px;
}
#B {
    max-width: 715px;
    padding-left: 220px;
    right: -3000px;
    z-index: 999;
    background-color:green;
    opacity:0.5;
}
</style>

Answer 3

您的问题是，您只是动画第一个元素的不透明度，当它达到零时，虽然您无法看到它 - 它仍然存在于原始尺寸的文档布局中。因为B在DOM中低于它，当它滑入时，它将低于（尽管）不可见A所占用的空间。

您可能希望在动画完成后在A上设置display:none，或者将其高度设置为零。这样既可以确保消失，也不会像预期的那样占用空间，这意味着B可以承担预期的位置。

您可能希望在A上使用fadeOut();而非动画显示其不透明度，这也会自动应用display:none;

悬停'解决方案上的纯CSS'：

Demo Fiddle

HTML

<div class='wrapper'>
    <div></div>
    <div></div>
</div>

CSS

.wrapper {
    position:relative;
}
.wrapper div:first-of-type {
    height:200px;
    width:100%;
    background:blue;
    position:relative;
    opacity:1;
    transition-delay:0;
    transition-duration:1s;
    transition-property:opacity;
}
.wrapper div:last-of-type {
    height:200px;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:red;
    width:100%;
    max-width:0;
    transition-delay:1s;
    transition-duration:1s;
    transition-property:max-width;
}
.wrapper:hover div:first-child {
    opacity:0;
}
.wrapper:hover div:first-child + div {
    max-width:100%;
}

2个超大的div在100％div中彼此相邻

3 个答案:

悬停'解决方案上的纯CSS'：

Demo Fiddle