r-cmsのjqueryの使い方

ブログ

投稿日時：2013/09/27(金) 19:00

カスタムアニメーションを作るためのjQuery関数の構文は次の通りです:

$(selector).animate({params},[duration],[easing],[callback])

キーパラメータはparamsで、アニメーション化するプロパティを定義します。同時に、多くのプロパティをアニメーション化することができます:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"})

2番目のパラメタはdurationです。アニメーションの適用に用いる時間を定義します。これは、"fast", "slow", "normal", または milliseconds の値をとります。

Example,1
	基本jQuery構文 <html> <head> <script type="text/javascript" src="/files/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").animate({fontSize:"0em"},"slow"); $("div").animate({left:"300px"},{duration: 1000}); 　　$("div").animate({height:300},"slow"); 　　$("div").animate({width:300},"slow"); $("div").animate({fontSize:"3em"},{duration: 5000}); $("div").animate({height:80},"slow"); $("div").animate({left:"0px"},"slow"); }); }); </script> </head> <body> <button>Start Animation</button> <br /><br /> <div style="background:#98bf21;height:20px;width:100px;position:relative">HELLO</div> </body> </html> ＊///////////////////////////// ｒ－ｃｍｓのhtmlに記入例 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#jq2").animate({fontSize:"0em"},"slow"); $("#jq2").animate({left:"300px"},{duration: 1000}); 　　$("#jq2").animate({height:300},"slow"); 　　$("#jq2").animate({width:300},"slow"); $("#jq2").animate({fontSize:"3em"},{duration: 5000}); $("#jq2").animate({height:80},"slow"); $("#jq2").animate({left:"0px"},"slow"); }); }); </script><button>Start Animation</button><br> <br> <div id="jq2" style="background:#98bf21;height:20px;width:100px;position:relative">HELLO</div>

試してください

"試してください" ボタンをクリックし、どの様に動くかを見てください。

次の章