jQueryのフェードイン・アウトアニメーション関数

フェード関数は、透明度のグラデーションの効果のみを提供します。

フェード関数

fadeIn(speed, [callback])を変更することで、一致するすべての要素のフェードイン効果を実現します。不透明度を設定し、オプションでアニメーションの完了後にコールバック関数をトリガーします。 fadeTo(speed, opacity, [callback])

このアニメーションは要素の不透明度のみを調整します。つまり、一致するすべての要素の高さと幅は変更されません。 段落を 600 ミリ秒かけてゆっくりとフェードアウトします。

fadeOut(speed, [callback] )

は、不透明度の変更を通じてすべての一致する要素のフェードアウト効果を実現し、オプションでアニメーションの完了後にコールバック関数をトリガーします。

600 ミリ秒をかけて段落をゆっくりとフェードアウトします。

$("p").fadeIn("slow");

一致するすべての要素の不透明度を指定された不透明度に段階的に調整し、オプションでアニメーションが完了した後にコールバックをトリガーします。段落の透明度を 600 ミリ秒かけて 0.66 (可視性の約 2/3) にゆっくりと調整します。

説明

fadeIn 関数と fadeOut 関数は、透明度のグラデーション効果でオブジェクトを表示および非表示にするために使用される表示と非表示に対応します。 () メソッド

jQuery fadeIn() は、非表示要素をフェードインするために使用されます。

$("#divPop").fadeIn(200);
$("#divPop").fadeOut("fast");

オプションのスピードパラメータはエフェクトの持続時間を指定します。「slow」、「fast」、またはミリ秒の値を取ることができます。オプションのコールバックパラメータは、フェーディングの完了後に実行される関数の名前です。

次の例は、さまざまなパラメーターを使用した fadeIn() メソッドを示しています。

 语法：$(selector).fadeIn(speed,callback);

2. jQuery fadeOut() メソッド

QQ截图20161026101329.png jQuery fadeOut() メソッドは、表示要素をフェードアウトするために使用されます。。

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("#div1").fadeIn();  
    $("#div2").fadeIn("slow");  
    $("#div3").fadeIn(3000);  
  });  
});  
</script>  
</head>  
<body>  
<p>演示带有不同参数的 fadeIn() 方法。</p>  
<button>点击这里，使三个矩形淡入</button>  
<br><br>  
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>  
<br>  
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>  
<br>  
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>  
</body>  
</html>

次の例は、さまざまなパラメーターを使用した fadeOut() メソッドを示しています。

语法：$(selector).fadeOut(speed,callback);

3. jQuery fadeToggle() メソッド

jQuery fadeToggle() メソッドは、fadeIn() および fadeOut() で使用できます。 ) メソッドを切り替えます。要素がすでにフェードアウトしている場合、fadeToggle() は要素にフェードイン効果を追加します。要素がすでにフェードインしている場合、fadeToggle() は要素にフェードアウト効果を追加します。

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
    $("#div1").fadeOut();  
    $("#div2").fadeOut("slow");  
    $("#div3").fadeOut(3000);  
  });  
});  
</script>  
</head>  
<body>  
<p>演示带有不同参数的 fadeOut() 方法。</p>  
<button>点击这里，使三个矩形淡出</button>  
<br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>  
<br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>  
<br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</html>

オプションのスピードパラメータはエフェクトの持続時間を指定します。「slow」、「fast」、またはミリ秒の値を取ることができます。オプションのコールバックパラメータは、フェーディングの完了後に実行される関数の名前です。 QQ截图20161026101513.png

次の例は、さまざまなパラメーターを使用した fadeToggle() メソッドを示しています:

         语法：$(selector).fadeToggle(speed,callback);

4. jQuery fadeTo() メソッド jQuery fadeTo() メソッドは、指定された不透明度 (0 と 1 の間の値) へのグラデーションを許可します。

<!DOCTYPE html>  
<html>  
<head>  
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("#div1").fadeToggle();  
    $("#div2").fadeToggle("slow");  
    $("#div3").fadeToggle(3000);  
  });  
});  
</script>  
</head>  
<body>  
<p>演示带有不同参数的 fadeToggle() 方法。</p>  
<button>点击这里，使三个矩形淡入淡出</button>  
<br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>  
<br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>  
<br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</body>  
</html>

必須の速度パラメーターは、エフェクトの持続時間を指定します。「slow」、「fast」、またはミリ秒の値を取ることができます。 fadeTo() メソッドの必須の不透明度パラメータは、フェード効果を指定された不透明度 (0 から 1 までの値) に設定します。オプションのコールバックパラメータは、関数の完了時に実行される関数の名前です。

次の例は、さまざまなパラメーターを使用した fadeTo() メソッドを示しています。

 语法：$(selector).fadeTo(speed,opacity,callback);

<!DOCTYPE html>  
<html>  
<head>  
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("#div1").fadeTo("slow",0.15);  
    $("#div2").fadeTo("slow",0.4);  
    $("#div3").fadeTo("slow",0.7);  
  });  
});  
</script>  
</head>  
<body>  
<p>演示带有不同参数的 fadeTo() 方法。</p>  
<button>点击这里，使三个矩形淡出</button>  
<br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>  
<br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>  
<br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</html>

fadeTo でポップアップレイヤーの透明度を設定した後、fadeIn を使用すると、オブジェクトが表示され、fadeTo で設定された透明度まで徐々にフェードします。これらは 2 つの関数の特徴であり、実際のアプリケーションでは必ずしも併用する必要はありません。

次のセクション

新しいファイル

<!DOCTYPE html>
<html>
<head>
 <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script>
 $(document).ready(function(){
 $("button").click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3").fadeIn(3000);
 });
 });
 </script>
</head>

<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button>点击这里，使三个矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

提出するリセットコード

自動運転

全画面表示

なし