jquery - 编辑带有动画效果的 Css

Question

我有一个绝对位置的 div，默认的“top”值设置为“-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