自動的

Question

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

このバイオリンは私が解決しようとしている問題を示しています。コンテナDIVは、アニメーション化された2つのDIVに対応しています。 2番目のDIVは、コンテンツが少ないため、1番目のDIVの高さが1番目のDIVよりも小さくなります。私がしようとしているのは、表示されているときに、下のDIVが2番目のDIVのコンテンツの高さに応じて自動的にスライドするようにすることです。しかし、それは2番目のDIVの上を滑り降りる。

これを解決する方法についてのご意見はありますか？

$(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; 
} 

Answer 1

編集： は私の更新をチェックしfiddle

は、動的コンテナの高さを変更するためのコードを追加しました。

チェックアニメーションバージョンhttp://jsfiddle.net/skram/fVKDy/17/

別のバージョン.. http://jsfiddle.net/skram/fVKDy/16/ < - の違いは、下のブロックがアップ/ダウンスライドした後、右/左シフトが起こるということです。

---

fiddleデモを確認してください。

2つのこと、

1. は#blog_slide_containerに固定の高さを追加しました。アニメーション化すると、アニメーション化されたdivの位置はabsoluteになるので、コンテナのサイズは0 heightになります。
2. 右クリックしたときの表示をblock1に追加しました。

Answer 2

これはそれです...私はそう思います - >http://jsfiddle.net/fVKDy/13/ 両方の部分がここで動作しています。 ブロックに別のラッパーを置き、その親戚を削除してください。必要な静的でない配置は、追加のラッパーのみです。

---

これは別のバージョンです。 http://jsfiddle.net/fVKDy/5/ もう少し調整するつもりです。

Answer 3

私はこれがあなたが探しているものだと信じています。

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

私が説明（実行する必要があります）で、まもなくして編集に戻ってくるだろう。しかし基本的には、要素自体の代わりにアニメーション化された内部コンテナを追加しました。