Animating a DIV automatically

问题

http://jsfiddle.net/AndyMP/fVKDy/

This fiddle illustrates a problem I am trying to solve. The container DIV accommodates two DIVs which are animated across. The second DIV has a smaller height than the first because there is less content. What I am trying to do is get the bottom DIV to slide up automatically according to the height of the content in the second DIV when it is visible. But it slides up and over the second DIV.

Any thoughts on how to solve this?

$(function() {
    $(".left_slide").click(function() {
        $(".block1").stop(true, true).animate({ left: -400 }, 500).hide(1000);
        $(".block2").stop(true, true).animate({ left: 0 }, 500);
    });
});
$(function() {    
    $(".right_slide").click(function() {
        $(".block2").stop(true, true).animate({ left: 400 }, 500);
        $(".block1").stop(true, true).animate({ left: 0 }, 500);
    });
});

CSS

#blog_slide_container {
position: relative;
width: 400px;
z-index: 5;
overflow: hidden;
border: 1px solid #000;
}
.block1 {
position: relative;
top: 0px;
left: 0px;
width: 400px;
z-index: 6;
background-color: #333;
color: #FFF;
}
.block2 {
position: absolute;
top: 0px;
left: 400px;
width: 400px;
z-index: 6;
background-color: #CCC;
color: #FFF;
}
#bottom_container {
position: relative;
float: left;
width: 100%;
height: 280px;
z-index: 3;
background-color: #000;
}

回答1:

Edit: Check my updated fiddle

Added code to dynamically change the container height.

Check animated version http://jsfiddle.net/skram/fVKDy/17/

Another version.. http://jsfiddle.net/skram/fVKDy/16/ <-- Difference is that the left/right shift happens after the bottom blocks slides up/down.

---

Check the updated fiddle demo.

Two things,

1. Added a fixed height to the #blog_slide_container. When you animate, the position of the animating div becomes absolute and so the container re-sizes itself to 0 height.
2. Added show on block1 when right is clicked.

回答2:

I believe this is what you're looking for.

http://jsfiddle.net/fVKDy/11/

I will come back shortly and edit in an explanation (have to run). But basically I added an inner container which is animated instead of the elements themselves.

回答3:

This is it... i guess -> http://jsfiddle.net/fVKDy/13/ Both parts are working here. Just put another wrapper to your blocks and delete those position relatives. The only non static positioning you need is on the additional wrapper.

---

Here is another version. http://jsfiddle.net/fVKDy/5/ Iam going to tweak it a bit more..

来源：https://stackoverflow.com/questions/9234550/animating-a-div-automatically