シャープなjQueryの要点まとめ(3) jQueryのイベントとアニメーション(その2:アニメーション)

2. アニメーション
1 show() メソッドと Hide() メソッド

コードをコピーコードは次のとおりです。

 
$("selector").show() 
要素のデフォルトを復元するか、display:none から表示属性を設定します 
$("selector").hide() 
要素の表示 スタイルは none で、$("selector").css("display","none") 

と同じです (注: パラメーターを渡した後、.show()および .hide() メソッドは、Animation によって要素の幅、高さ、透明度の属性を変更します。渡されたパラメータは、.show(600) などの表示速度をミリ秒単位で制御します。また、fast、normal、slow、などを渡すこともできます。 fast は 200 ミリ秒、normal は 400 ミリ秒、slow は 600 ミリ秒)
2 fadeIn() メソッドと fadeOut() メソッド

コードをコピーコードは次のとおりです:

 
$("selector").fadeIn() 
display:none から指定された時間内に完全に表示されるまでの透明度を制御します 
$ ("selector").fadeOut() 
指定した時間内に表示:なしに減らす透明度を制御します。 

3 slideUp() メソッドと slideDown() メソッド

コードをコピーしますコードは次のとおりです:

 
$("selector").slideUp() 
高さコントロール要素の高さが、指定された時間内に下から上に短縮され、display:none; 
 $("selector").slideDown() 
要素の高さが display:none から最大まで伸びるように制御します。指定時間内の高さ 

4 カスタムアニメーションメソッド animate()

コードをコピーコードは次のとおりです次のように:

 
$("selector").animate(params,speed,callback); 
params: {property1:"value1" などのスタイル属性と値を含むマッピングproperty2:"value2",...} 
speed: 速度パラメーター、オプション
コールバック: アニメーションの完了時 実行パラメーター (つまり、コールバック関数)、オプション

一般的なアニメーションの例

コードをコピーコードは次のとおりです。

 
<script>//カスタムアニメーションの例<br>$(function(){ <br>$("selector").click(function() { <br>$(this).animate({left:"500px"},3000); //セレクターは 3 秒で 500 ピクセル右に移動します <br>}) <br>}) <br></script&gt ; <br><br> </div>
<br><div class="codetitle"><span><a style="CURSOR: pointer" data="79900" class="copybut" id="copybut79900" onclick="doCopy('code79900')">コードをコピー <u></u></a> コードは次のとおりです: </span></div> <div class="codebody" id="code79900"><script> <br>//蓄積と蓄積アニメーションの例<br>$(function() { <br>$("selector").click(function(){ <br>$(this).animate({left:" =500px"},3000); //クリック イベントが連続的にトリガーされると、500px が<br>}); <br>}) <br></script> 
<script> <br> //複数のアニメーションの例<br>$(function(){ <br>$("selector").click(function(){ <br>$(this).animate({left:"500px",top: "300px",height:" =100px"},3000); //右下に 30 度移動し、同時に高さを増やします<br>}) <br>}) <br></script> 
 <script>複数のアニメーションを順番に実行<br>$(function(){ <br>$("selector").click(function(){ <br>$(this).animate({left:"500px"},3000) .animate({top:"300px"},3000); //アニメーション キュー<br>}) <br>}) <br><br> <br>5 アニメーション コールバック関数<br> css() メソッドはアニメーションキューに追加されないため、すぐに実行されます。アニメーションの最後のセレクターの CSS を変更したい場合は、コールバック関数 </div> を使用する必要があります。 例: <br><br><br><br><div class="codetitle"> コードをコピー <span> <a style="CURSOR: pointer" data="6603" class="copybut" id="copybut6603" onclick="doCopy('code6603')"><u> コードは次のとおりです: </u></a> </span><script> </div>$("selector").click(function(){ <div class="codebody" id="code6603">$(this).animate ({property1:"value1"},time).animate( {property2:"value2"},time,function(){ <br>$(this).css("property3","value3"); //css () メソッドはコールバック関数を使用してアニメーション キューに参加します<br>}) ; <br></script> 

 
 (注: アニメーション コールバック関数はすべての jQuery に適用されます)アニメーション効果メソッド) 
6 アニメーションを停止し、アニメーション状態かどうかを判断します。 
$("selector").stop() 

キューに次のアニメーションがある場合、現在のアニメーションを終了します。次のアニメーションがすぐに実行されます。形式は $("selector").stop([clearQueue][,gotoEnd ])
アニメーションの切り替え例:

コードをコピーします

コードは次のとおりです:

 
<script> <br>$("selector").hover(function(){ <br>$(this).stop().animate(); <br>},function() { <br>$(this).stop().animate(); <br>}) <br></script> 

clearQueue パラメータが true に設定されている場合、要素はクリアされますまだ実行されていない次のアニメーションキュー
例:

コードをコピーコードは次のとおりです:

 
<script> <br>$("selector").hover(function(){ <br>$(this).stop(true).animate().animate() //この時点でカーソル移動イベントがトリガーされます。このキュー内の 2 番目のアニメーションの実行を避けるために、後続のアニメーション キューを直接スキップします <br>}, function(){ <br>$(this).stop(true).animate ().animate() <br>}) <br></script> 

gotoEnd パラメーターが true に設定されている場合、実行中のアニメーションは終了時の状態に直接到達できます。
is(":animated")
要素がアニメーション状態であるかどうかの判定は、アニメーションの蓄積を防ぐために使用できます
例:

コードをコピーコードは次のとおりです:

著者別の最新記事