jQuery学習ノートのjQueryアニメーション効果
Hello World jQuery!
<br>$(document).ready(function()<br>{</p>
<p>// show, hide toggle . <br>// ， show( speed, [callback] ), <br>//callback, :function callback() {this;} this DOM . .<br>// , , / <br>// ("slow", "normal", "fast")<br>// ， ( 500).</p>
<p><br>// <br>var speed = 500;<br>// <br>$("#btnShow").click(function(event)<br>{<br>// <br>event.stopPropagation();<br>// <br>var offset = $(event.target).offset();<br>$("#divPop").css({ top: offset.top + $(event.target).height()+ "px", left: offset.left });<br>// <br>$("#divPop").show(speed);<br>});<br>// <br>$(document).click(function(event) { $("#divPop").hide(speed) });<br>// <br>$("#divPop").click(function(event) { <br>event.stopPropagation()<br>$("#divPop").hide(speed);<br>});</p>
<p><br>var flip = 0;<br>$("#btnP").click(function () {<br>$("p").toggle("fast");<br>//$("p").toggle( flip++ % 2 == 0 );<br>});</p>
<p><br>// <br>$("#btnT").click(function(event)<br>{<br>// <br>event.stopPropagation();<br>// <br>var offset = $(event.target).offset();<br>$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });<br>// <br>$("#divPop").toggle(speed);<br>});</p>
<p>});<br>
============================================================
スライドアニメーションと透明アニメーションの効果コード:
Hello World jQuery!
<br>$(document).ready(function()<br>{</p>
<p>// <br>$("#btnShow").click(function(){<br>$("#divPop").slideDown("fast");<br>});</p>
<p>$("#btnHide").click(function(){<br>$("#divPop").slideUp("slow");<br>});</p>
<p>$("#btnT").click(function(){<br>$("#divPop").slideToggle("slow");<br>});</p>
<p><br>// </p>
<p>$("#bShow").click(function(){<br>$("#divPop").fadeIn(2000);<br>});</p>
<p>$("#bHide").click(function(){<br>$("#divPop").fadeOut("slow");<br>});</p>
<p>// <br>$("#bHelf").click(function(){<br>$("#divPop").fadeTo("slow",0.3);<br>});</p>
<p> </p>
<p>});<br>