jquery - 使用动画效果编辑 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