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

时间:2022-12-01 21:01:28

转载请注明出处: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”)。