animate动画
$div=$('#div1');
$div.animate({
width:300,
height:300
},1000,'swing',function () {
alert('done');
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$box=$('.box');
$box.animate({
width:300,
height:300
},1000,'swing',function () {
alert('done');
})
})
</script>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: gold;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>用animate动画改变box大小，完成之后用回调函数弹出done
感兴趣的朋友可以使用如下工具测试上述代码运行效果：
在线HTML/CSS/JavaScript代码运行工具：
http://tools.jb51.net/code/HtmlJsRun
在线HTML/CSS/JavaScript前端代码调试运行工具：
http://tools.jb51.net/code/WebCodeRun
更多关于jQuery相关内容还可查看本站专题：《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
