Question

我在绝对位置有一个div，默认的“top”值设置为“-200px”。当我点击div时，“top”值更新为“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 docs：

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

使用动画效果编辑Css

1 个答案: