0

ボタンを押すだけでコンテンツを表示するための単純なスライド アップおよびスライド ダウン メカニズムを実装したいと考えています。すぐに使用できるjquery関数slideUp()およびslideDown()を使用すると、コンテンツが押しつぶされます。スライド メカニズムは、Twitter で使用されているものと似たものにしたいと考えています (タイムラインでツイートをクリックすると、詳細情報とオプションが下にスライドします)。そこではコンテンツがつぶれません。代わりに、下の境界線がコンテンツの上をシームレスに移動するため、押しつぶされることなく上にスライドします。これを実装する方法についての指針はありますか?

編集：

可視性にスライドして非表示にするコンテンツは div 内にあります

<div id='container'>
 <div id='slider'>
   <div> other content </div>
 </div>
 <div id='button'>
   Click to slide
  </div>
</div>

「ボタン」divのクリックイベントをリッスンします

$('.button').click(function(){
  if($('.slider').is(":visible"))
  {
    $('.slider').slideUp();
  }
  else { $('.slider').slideDown(); }
});

これは基本的なスライダーです。'slider' div 内のコンテンツは、アニメーション化すると押しつぶされて歪んでしまいます。

4

1 に答える 1

1

このデモをお試しください 

$(function(){

  $('#button').click(function(){
  if($('#slider').is(":visible"))
  {
    $('#slider').slideUp();
  }
  else { $('#slider').slideDown(); }
});

});
于 2012-09-28T13:21:40.390 に答える