jQuery学习笔记——动画

jQuery效果——动画

animate方法：

　　基础语法：$(selector).animate({params},speed,callback);

其中,{params}要定义为如下格式： {left:'250px'} {top:'100px'}之类，综合一起，给出例子：

$("#div1").animate({left,'100px'});　

$("#div1").animate({left,'100px'},1000);

$("#div1").animate({left,'100px'},1000,function(){

　　alert("动画执行1000毫秒之后，弹出此提示!");

});　

 

操作多个属性如下：

$("div1").animate({left:'100px',opacity:'0.3','100px',height:'30px'});

//speed 和 callback参数扩展类似，这里就不举例，可以类推。

需要注意的一点（非常重要）的是，如果属性带有如"margin-left"这样有"-"的属性名称，我们在写入到动画参数里面必须写成如：$("div1").animate({marginLeft:'100px'}); 切记切记!

 

使用相对值(以width为例):

$("div1").animate({left:'100px',height:'+=20px','-=2px'});

 

使用预定义的值: 可以把属性动画值设为"show" / "hide" / "toggle"

这代表什么意思呢？ 比方说：$("#div1").animate({height:'toggle'});

就是说，把height设置为当div1 显示或者隐藏时候的值(即用toggle表示切换);

 

使用队列功能：即多个动画排队执行

$("button").click(function(){
　　var div=$("div");
　　div.animate({height:'300px',opacity:'0.4'},"slow");
　　div.animate({'300px',opacity:'0.8'},"slow");
　　div.animate({height:'100px',opacity:'0.4'},"slow");
　　div.animate({'100px',opacity:'0.8'},"slow");
});

$("button").click(function(){
　　var div=$("div");
　　div.animate({left:'100px'},"slow");
　　div.animate({fontSize:'3em'},"slow");
});

 

停止动画: stop();

　　基础语法:$(selector).stop(stopAll,goToEnd); 如：

　　$("#stop").click(function(){
　　　　$("#panel").stop();
　　});