jQueryでスライド効果

Question

jqueryを使用してスライド効果を作成したいと思います。私はいくつかのdivを持っています：

<div id='div_1'>content currently displayed</div>
<div id='div_2' style="display:none">content to be loaded</div>
<div id='div_3' style="display:none">content to be loaded</div>

アイデアは、div_2がスライド中に表示され、div1を視界から「プッシュ」するときに表示されるということです。 DivのコンテンツがAjaxを介して読み込まれているため、実際のスクロールを使用できないと思うので、ロードされる前に正確に配置することはできません。

何か案が？

ティア

グレッグ

Answer 1

グレッグ、あなたは私がここでやったようなことを探しているように聞こえます：

http://jsfiddle.net/2e5qv/

もしそうなら、あなたがしたいのはそれらすべてを封じ込めることです <div>親の内側をsし、それらをスライドさせたいときは、各divの上部を正しい数のピクセル数をアニメーション化します。上記のソリューションにはそれぞれがあります <div> 多かれ少なかれ20pxの固定高さに設定されています（経由 line-height).

親 <div> 現在のコンテンツのみを表示するための一種のウィンドウとして機能します。

Answer 2

あなたはこのように意味します：

$('#div_2').slideDown('slow', function(){
  $('#div_1').slideUp('slow');
});

こちらの作業デモをご覧ください。

Answer 3

Sarfrazが提供したものを取り、あなたが探していると思うものに基づいて少し修正しました。デモのために、クリックイベントで発砲しました。ここで作業例を見つけることができます： http://jsbin.com/emowu3/3

$('#div_1').click(function(){
    $('#div_1').slideUp('slow');
    $('#div_2').slideDown('slow');
});
$('#div_2').click(function(){
    $('#div_2').slideUp('slow');
    $('#div_3').slideDown('slow');
});
$('#div_3').click(function(){
    $('#div_3').slideUp('slow');
    $('#div_1').slideDown('slow');
});