Your issue is that you are simply animating the opacity of your first element, when this hits zero, although you cant see it- it is still present within the document layout with its original dimensions. Because B is below it in the DOM, when it slides in, it will be below the space taken by the (albeit) invisible A.
You may want to set display:none
on A after the animation completes, or alternatively set its height to zero. This will ensure that as well as fading out, it isnt taking up space as you are anticipating, meaning B can assume the anticipated position.
You may want to use fadeOut();
on A instead of animating its opacity, this will automatically also apply display:none;
Pure CSS 'on hover' solution:
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%;
}