在jQuery中已经有封装好的自定义动画的函数,即animate() 方法。
语法:$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。这是一个字典数组。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
举例:实现图片的移动,移动完成后弹出完成操作
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#myman").animate(
{
top:'100px',
left:'100px',},
3000,
function(){alert("完成") }
);
});
</script>
"
(2)链式编程
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#myman").click(function(){
$(this).animate({
width:"200px",
},
2000
).animate(
{
width:'150px',},
2000,
function(){alert("变形结束");}
);
})
});
</script>