利用jQuery的动画方法我们可以通过控制CSS元素制作一些简单的动画
animate方法的调用格式：
$(selector).animate({params},speed,callback);
其中中括号中定义的是CSS属性，speed可以取“slow”，“fast”或者是以毫秒为单位的时间
callbakc是定义完成动画之后所触发的函数
###使用方法
定义单个css属性的改变，例如：
$("button").click(function(){
$("div").animate({height:"100px"});
});
这样，触发之后就将div的高度就由原来设置的高度变化为100像素，在这里有个问题需要注意，动画效果可以改变元素的位置，但是所改变的元素一定要设置属性position,值可以是position提供的参数relative,fixed等等
不仅仅是单个的CSS属性，params中可以定义多个属性，注意格式，不同的元素之间要用逗号分割：
例如：
$("#btn_animate").click(function(){
$("#div1").animate({
left:"200px",
height:"300px",
width: "100px",
opacity:"0.5",
});
});
传入speed参数：
$("#btn_animate").click(function(){
$("#div1").animate({
left:"200px",
height:"300px",
width: "+=100px", //这个地方的+=表示在原来的基础上进行增加
//opacity:"0.5",
},1000,function(){
alert("animat has finished");
});
});
注意在操作多个属性的时候，操作的属性名曾与CSS中并不完全一致，主要是那些名称是复合的属性，比如font-size要写成fontSize，也就是要改成符合Camel标记法的形式，这样的属性还有：lineHeight，maxHeight等等
另外，仅仅使用这样的语法是无法操纵颜色的变化的，比如backgroundcolor属性，如果需要使用颜色动画，需要下载color animation的相应库
如果想要实现多个动作的不同时间的发生，可以使用动画效果的队列功能：
$("#btn_animate").click(function(){
var div = $("#div1");
div.animate({left:"50px",height:"+=50px"},1000);
div.animate({left:"100px",height:"+50px"},500);
});
如果想要在元素执行动画的时间段内停止动画，可以使用stop函数：
$(selector).stop(stopAll,goToEnd);
stopAll参数控制是否清空动画队列，gotoEnd则是控制是否事件发生后立即完成动画：
如果仅仅调用stop函数的话动画停止之后再次触发动画事件依然会继续完成剩余的动画内容，
传入stopAll之后，动画会停止，之后的动画也不会继续完成
传入gotoEnd为真之后，动画会直接跳转到完成的状态：
例如：
$("#btn_animate").click(function(){
var div = $("#div1");
div.animate({left:"50px",height:"+=50px"},2000);
});
$("#btn_animate_stop").click(function(){
$("#div1").stop(true);//这种方式是stopAll为真，剩余的动画不会再完成
//$("#div1").stop(false,true);这种方式是gotoEnd参数为真，动画会立刻停止
});
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/116852.html
