使用动画效果编辑 Css

Question

我有一个绝对位置的 div，默认“顶部”值设置为“-200px”。 当我单击 div 时，“顶部”值更新为“0”。这样我就看到了整个Div。

这是js：

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

有没有办法通过动画实现这个结果？比如滑下效果？

另外，当我再次点击 div 时，我希望“top”值恢复为“-200px”。

Answer 1

当然。使用.animate() 方法。而不是click 事件，使用toggle 接受之前/之后的两个函数。

现场示例： 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 文档：

• .toggle() - http://api.jquery.com/toggle
• .animate() - http://api.jquery.com/animate