????:animate方法: 基礎(chǔ)語法:$(selector).animate({params},speed,callback);其中,{params}要定義為如下格式: {left:'250px'} {top:'100px'}之類,綜合一起,給出例子:$("#div1").animate({left,'100px'}); $(&qu
animate方法:
基礎(chǔ)語法:$(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("動畫執(zhí)行1000毫秒之后,彈出此提示!"); });
操作多個屬性如下:
$("div1").animate({left:'100px',opacity:'0.3',width:'100px',height:'30px'});
//speed 和 callback參數(shù)擴(kuò)展類似,這里就不舉例,可以類推。
需要注意的一點(diǎn)(非常重要)的是,如果屬性帶有如"margin-left"這樣有"-"的屬性名稱,我們在寫入到動畫參數(shù)里面必須寫成如:$("div1").animate({marginLeft:'100px'}); 切記切記!
使用相對值(以width為例):
$("div1").animate({left:'100px',height:'+=20px',width:'-=2px'});
使用預(yù)定義的值: 可以把屬性動畫值設(shè)為"show" / "hide" / "toggle"
這代表什么意思呢? 比方說:$("#div1").animate({height:'toggle'});
就是說,把height設(shè)置為當(dāng)div1 顯示或者隱藏時候的值(即用toggle表示切換);
使用隊(duì)列功能:即多個動畫排隊(duì)執(zhí)行
$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); });
停止動畫: stop();
基礎(chǔ)語法:$(selector).stop(stopAll,goToEnd); 如:
$("#stop").click(function(){ $("#panel").stop(); });