jquery中的动画效果方法animate()及其回调函数的使用

最新推荐文章于 2024-08-08 00:15:00 发布

我是干勾鱼

最新推荐文章于 2024-08-08 00:15:00 发布

阅读量2.8w

点赞数 1

分类专栏： Web前端文章标签： jquery 动画 animater 方法回调函数

本文链接：https://blog.csdn.net/dongdong9223/article/details/52883286

版权

Web前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

转载请注明出处：http://blog.csdn.net/dongdong9223/article/details/52883286
本文出自【我是干勾鱼的博客】

有时候我们会使用一些动态效果，比如将div动态边长、缩短之类的，这需要使用jquery中的animate()方法，比如：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function()
  {
  $(".b1").click(function(){
    $("#item").animate({height:"200px"});
  });
  $(".b2").click(function(){
    $("#item").animate({height:"50px"});
  });
});
</script>
</head>

<body>
    <div id="item" style="background:#f00;height:50px;width:50px;margin:6px;">
    </div>
    <button class="b1">Animate</button>
    <button class="b2">Reset</button>
</body>

</html>

这里说一下它的回调函数，如果要想在animate()执行完之后才进行某个操作，直接在这个方法后面再进行操作是不行的，必须在它的回调函数中进行，比如：

$(".b1").click(function(){
    $("#item").animate({height:"200px"}, function() {
        alert("hello");
    });
  });

这样才能在animate()执行完之后弹出alert(“hello”)。

我是干勾鱼

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录