jQueryの基本的なアニメーション関数

1. 基本的なアニメーション関数を使用する

基本的なアニメーション関数は、主に表示、非表示、切り替えの 3 つのカテゴリに分かれており、アニメーションの切り替えがアニメーションの表示状態に適用されないことを示しています。要素:

$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();

によって提供されます。コールバック関数は省略できるため、2 つのパラメーターでオーバーロードします。そのため、最初の例で使用したように、唯一のパラメーターとして値を渡すことができます。要素は、内部のアニメーション効果とともに表示/非表示になります。パラメーターで指定された時間:

$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");

200 が渡された場合、レイヤーが 200 ミリ秒以内にグラデーションとして表示されることを意味します。speed パラメーターには、あらかじめ決められた 3 つの速度 (「slow」、「normal」) のいずれかの文字列を使用できます。 "、または "fast")、またはアニメーションを表します。持続時間のミリ秒値 (1000 など)。

3 つの関数はすべてコールバック関数 callback で渡すことができます。署名は次のとおりです。

function callback() {  this; // dom element}

This in the callback 関数は、この関数を実行する DOM オブジェクトであり、アニメーションの終了時に実行されます。

2. トグル関数を使用します

トグル関数は、要素の表示状態を切り替えることができる、より強力な関数です。たとえば、テキストを使用する必要がある状況によく遭遇します。

注: toggle() メソッドは jQuery1.8 で廃止されたと宣言され、jQuery1.9 で削除されました。アニメーションにはトグルというメソッドもあります。どちらが呼び出されるかは、渡されたパラメータの設定によって異なります。

この効果を実現するために、冒頭の例を少し変更します:

<!doctype html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>jQuery - Start Animation</title>
 <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script>
   $(document).ready(function() {      //动画速度
     var speed = 500;      //绑定事件处理
     $("#btnShow").click(function(event) {        //取消事件冒泡
       event.stopPropagation();        //设置弹出层位置
       var offset = $(event.target).offset();
       $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });        //切换弹出层的显示状态
       $("#divPop").toggle(speed);
     });      //单击空白区域隐藏弹出层
     $(document).click(function(event) {
       $("#divPop").hide(speed)
     });      //单击弹出层则自身隐藏
     $("#divPop").click(function(event) {
       $("#divPop").hide(speed)
     });
   });  </script></head><body>
 <div>
   <button id="btnShow">Display the text prompt</button>
 </div>
 <!-- 弹出层 -->
 <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;">
   <div style="text-align: center;">pop div</div>
 </div>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>php中文网 - 领先的 php教程网站</p> <p>在 php中文网，你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> </body> </html>

提出するリセットコード

自動運転