2

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_1 をスライドさせて「押して」見えないようにしながら、div_2 が表示されるというものです。これは、ウィンドウを (水平または垂直に) スクロールするのと少し似ています。divのコンテンツがajax経由でロードされているため、実際のスクロールを使用できないと思うので、ロードする前に正確に配置できません。

何か案が？

ティア

グレッグ

4

3 に答える 3

3

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

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

ここで動作デモを参照してください。

于 2010-08-17T15:09:58.353 に答える
2

グレッグ、あなたは私がここでやったことのようなものを探しているようです:

http://jsfiddle.net/2E5Qv/

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

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

于 2010-08-17T17:52:15.453 に答える
0

私は Sarfraz が提供したものを取り、あなたが探していたと思うものに基づいて少し修正しました. デモのために、クリック イベントで起動するようにもしました。ここで実際の例を見つけることができます: http://jsbin.com/emou3/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');
});
于 2010-08-17T18:17:11.010 に答える