编辑CSS动画效果

发布于 2024-09-05 01:24:19 字数 308 浏览 8 评论 0原文

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

这是js：

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

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

另外，当我再次单击 div 时，我希望“顶部”值将恢复为“-200px”。

原文

I've a div in a absolute position with a default "top" value set to "-200px".
When i click on the div the "top" value is updated to "0". In this way I see the entire Div.

This is the js:

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

Is there a way to achieve this result but with an animation? For example, a slide down effect?

Also, when i click another time to the div I'd like that the "top" value will be restored to "-200px".

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陌伤ぢ 2024-09-12 01:24:19

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

实例： 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

Of course. Use the .animate() method. And instead of the click event, use toggle which accepts two functions for before/after.

Live Example: 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: