jQuery エフェクト - フェード

jQuery フェーディングメソッド

jQuery を使用すると、要素のフェード効果を実現できます。

jQueryには以下の4つのフェードメソッドがあります:

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

fadeIn()メソッド

jQuery fadeIn()はフェードインに使用されます。隠された要素。

構文:

$(selector).fadeIn(speed,callback);

オプションのspeedパラメータは、エフェクトの持続時間を指定します。「slow」、「fast」、またはミリ秒の値を取ることができます。 .

オプションのコールバックパラメーターは、フェーディングの完了後に実行される関数の名前です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(4000);
  });
});
</script>
</head>
<body>
<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()メソッド

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

構文:

$(selector).fadeOut(speed,callback);

オプションのspeedパラメータは、エフェクトの持続時間を指定します。「slow」、「fast」、またはミリ秒の値を取ることができます。

オプションのコールバックパラメータは、フェーディング完了後に実行される関数の名前です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(5000);
  });
});
</script>
</head>
<body>
<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>

fadeOut()メソッド

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

構文:

$(selector).fadeOut(speed,callback);

オプションのspeedパラメータは、エフェクトの持続時間を指定します。「slow」、「fast」、またはミリ秒の値を取ることができます。

オプションのコールバックパラメータは、フェーディング完了後に実行される関数の名前です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(4000);
  });
});
</script>
</head>
<body>
<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>

fadeToggle() メソッド

jQuery fadeToggle() メソッドは、fadeIn() メソッドと fadeOut() メソッドを切り替えることができます。

fadeToggle() は、要素がすでにフェードアウトしている場合に、要素にフェードイン効果を追加します。

fadeToggle() は、要素がすでにフェードインしている場合、要素にフェードアウト効果を追加します。

構文:

$(selector).fadeToggle(speed,callback);

オプションのspeedパラメータは、エフェクトの持続時間を指定します。「slow」、「fast」、またはミリ秒の値を取ることができます。

オプションのコールバックパラメータは、フェーディング完了後に実行される関数の名前です。

りー

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> .big{ font-size:30px; color:#FF0000;} </style> </head> <body> <script> function fadeIn(){ $("#popup").fadeIn(2000); $("#popup").css("position","absolute"); $("#popup").css("left","100px"); $("#popup").css("top","100px"); } function fadeOut(){ $("#popup").fadeOut(2000); } function fadeTo(){ $("#popup").fadeTo(2000,0.5); } </script> <input type="button" value="弹出层" onclick="fadeIn()" > <div id="popup" style="width:200px;height:200px;border:1px red solid;display:none;background-color:red;"> 弹出层的试验 <br> <input type="button" value="取消" onclick="fadeOut()" > <input type="button" value="半透明" onclick="fadeTo()" > </div> </body> </html>

提出するリセットコード

自動運転