0

デフォルトの「top」値が「-200px」に設定された絶対位置にdivがあります。divをクリックすると、「top」の値が「0」に更新されます。このようにして、Div全体が表示されます。

これはjsです：

$(document).ready(function(){
  $("#search_bar").click(function () {
    $(this).css("top","0");
  });
});

この結果を達成する方法はありますが、アニメーションを使用しますか？たとえば、スライドダウン効果？

また、もう一度divをクリックすると、「top」の値が「-200px」に復元されます。

4

1 に答える 1

3

もちろん。メソッドを使用し.animate()ます。そして、clickイベントの代わりに、toggleビフォア/アフターの 2 つの関数を受け入れるものを使用します。

実際の例: http://jsfiddle.net/a86tm/1/

$(document).ready(function(){

  $("#search_bar").toggle(  // toggle() takes 2 functions
      function () {
          $(this).animate({top: 0}, 500);  // Use animate() to animate the transition.
      },                                   // The 500 argument is the duration.
      function() {
          $(this).animate({top: -200}, 500);
      }
  );

});​

jQuery ドキュメント:

于 2010-06-12T23:47:56.203 に答える