2

私のサイトには、いくつかの検索結果を表示するサイドバーがあります。最初の 20 件の結果のみを表示したい。次に、「もっと見る」ボタンがあります。そのボタンをクリックすると、合計リストが表示されます。

ここに私のコードがあります：http://jsfiddle.net/FCCGF/1/

ここで欲しいのは：

  • ページの読み込み時に、Test1 のみを表示します。

  • 「もっと見る」をクリックすると、アニメーションを上から下に開始したい（リストのすべてのオプションを表示するため）

  • 「もっと見る」をリストの最後に置き、ユーザーがもう一度クリックすると、元の場所に戻りたいと思っています。

何か助けてください。

4

1 に答える 1

4

アニメーション化するとき、トップとマージントップを更新して、下にスライドする効果を実現できます。

$(document).ready(function() {
    var totalSidebarHeight = $(".sidebar").height();
    var resultHidden = totalSidebarHeight - 20;

    $(".topResultsArea").height( resultHidden );

    $(".showMore").toggle(function(){
        $(".topResultsArea").animate({height:20, top:$(".sidebar").height(), marginTop:0},200);

      },function(){
          $(".topResultsArea").animate({height:resultHidden, top:0, marginTop:40},200);
      });

});​

更新されたフィドル: http://jsfiddle.net/johnkoer/FCCGF/18/

于 2012-08-28T13:49:21.300 に答える