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

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

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

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

$("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()