[TOC] ## 特效 出發特效的方式 ``` .effect() //只是做出效果,在元素已經顯示時時用 .hide() .show() .toggle() //切換元素時使用 .toggleClass() .addClass() .removeClass() ``` ### .addClass() 特效 ``` .addClass( className [, duration ] [, easing ] [, complete ] ) -duration 執行時間 -easing 參數 查看網址 http://www.runoob.com/jqueryui/api-easings.html -complete 完成后的回調 ``` ``` //style .big-blue { width: 200px; height: 200px; background-color: rgb(255, 217, 0); } //添加class $(".foo").addClass( "big-blue", 1000, "easeInOutBounce" ); ``` 給foo 添加 big-blue類 ### .effect() ``` .effect( effect [, options ] [, duration ] [, complete ] ) - effect 一個字符串，指示要使用哪一種特效。 - options 特效具體的設置和 easing。 - duration 一個字符串或一個數字，指定動畫將運行多久。 - complete 一旦動畫完成時要調用的函數。 ``` demo ``` $( "div" ).effect( "bounce", "easeInOutBack" ); ``` ### 其他特效 1. 百葉窗特效 `$( "#toggle" ).toggle( "blind" );` 2. 反彈特效 `$( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" ); ` //time 表示次數 3. 剪輯特效 ` $( "#toggle" ).toggle( "clip",{direction:"vertical"} );` 4. 顏色動畫 ``` $(".toggle").animate({ backgroundColor: "rgb( 20, 20, 20 )", borderTopColor:"rgb(23,23,23,0.8)", }); ``` 5. 降落特效 `$(".demo").toggle("drop",{direction:"up"}) ` 6. 爆炸特效 ` $(".demo").toggle("explode",[{pieces:100}])` //pieces 炸裂的碎片數 7. 淡入淡出特效 `$(".demo").toggle("fade")` 8. 折疊特效 `$(".demo").toggle("fold",[{size:100,horizFirst:false}])`//size:折疊的大小,horizFirst:是否進行水平折疊 9. 隱藏 ``` .hide( effect [, options ] [, duration ] [, complete ] ) ``` ``` $( "div" ).hide( "drop", { direction: "down" }, "slow" ); ``` 10. 膨脹特效 `$(".demo").toggle("puff",{percent:110})` 11. 縮放特效 ``` $( "#toggle" ).toggle( "scale" ); $(".demo").toggle("scale",[{direction:"vertical",percent:200}]) ``` 12. 震動特效 ``` $(".demo").effect("shake",{direction:"up",distance:200,times:10}) ``` 13. 尺寸特效 ``` $(".demo").effect("size",{ to:{width:200,height:60} },1000) ``` 14. 滑動特效 `$(".demo").effect("slide",{distance:"50%",direction:"up"}) ` 15. 轉移特效 ``` //style .ui-effects-transfer { border: 1px dotted black; } //js $(".demo").effect("transfer",{ to:$(".demo3") },1000) ```