jQueryのフェードインとフェードアウト


jQuery 効果 - フェード

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

時間は貴重なので、迅速で便利な学習方法を提供します。

初心者向けチュートリアルでは、必要な知識を学ぶことができます。

例

jQuery fadeIn()
jQuery fadeIn() メソッドを示します。

jQuery fadeOut()
jQuery fadeOut()メソッドを示します。

jQuery fadeToggle()
jQuery fadeToggle() メソッドを示します。

jQuery fadeTo()
jQuery fadeTo()メソッドを示します。

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

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

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

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn()メソッド

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

構文:

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

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

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

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.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>点击淡入 div 元素。</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>

インスタンスの実行»

オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックしてください

jQuery fadeOut ( ) メソッド

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

構文:

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

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

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

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出 div 元素。</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>

インスタンスの実行 »

オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

jQuery fadeToggle() メソッド

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

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

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

構文:

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

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

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

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);
	});
});
</script>
</head>
<body>

<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</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>

インスタンスの実行»

オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックしてください

jQuery fadeTo()メソッド

jQuery fadeTo() メソッドを使用すると、指定された不透明度 (0 と 1 の間の値) にフェードすることができます。

構文:

$(selector).fadeTo(speed,opacity,callback);

必須のspeedパラメータは、効果の持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。

fadeTo() メソッドの必須の不透明度パラメーターは、フェード効果を指定された不透明度 (0 から 1 までの値) に設定します。

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

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.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>

インスタンスの実行 »

オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします