ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryでフェードインとフェードアウト効果を実現する方法
jQueryでフェードインとフェードアウト効果を実現する方法
- 清浅オリジナル
- 2019-02-12 14:26:013573ブラウズ
jQuery には、fadeIn()、fadeOut()、fadeToggle()、fadeTo() という 4 つのメソッドがあります。これらの 4 つのメソッドを通じて、フェードインとフェードアウトの効果を実現できます。今日は、jQuery を使用してフェードインおよびフェードアウト効果を実現する方法について共有したいと思います。
## 皆さんの参考になれば幸いです。 
#[チュートリアルの推奨事項:
]jQuery には、fadeIn()、fadeOut()、fadeToggle()、fadeTo() という 4 つのフェード メソッドがあります。 , このメソッドを使用してフェードインとフェードアウト効果を実現する方法は、主に
fadeIn()メソッド
の記事で詳しく紹介します。非表示の要素をフェードインするために使用されます。
speed: エフェクトの持続時間を示します。「遅い」、「速い」、またはカスタマイズされた時間値を指定できます。これはオプションのパラメータです。 callback: フェードイン効果の完了後に実行される関数の名前を示します。fadeOut() メソッド
これは主に表示要素をフェードアウトするために使用され、そのパラメータ値は fadeIn の値と同じです。
fadeToggle() メソッド
このメソッドは、fadeIn() を切り替えることができます。 ) および fadeOut() メソッド
要素がフェードアウトしている場合、fadeToggle() は要素にフェードイン効果を追加します要素がフェードインしている場合、fadeToggle() は要素にフェードイン効果を追加します要素へのフェードアウト効果fadeTo() メソッド
fadeTo() メソッドにより、指定された不透明度 (0 から 1 までの値) へのグラデーションが可能になります。 速度関数とコールバック関数に加えて、fadeTo メソッドにはさらに、フェードイン効果とフェードアウト効果の不透明度を設定するために使用される追加の必須不透明度パラメーターがあります。
共有例:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#img{
width:300px;
height:200px;
position: absolute;
top:40px;
}
button{
position: absolute;
top:10px;
}
</style>
</head>
<body>
<script src="./jquery/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#img").fadeToggle(3000).fadeTo(0.5);
});
});
</script>
<button>点击</button>
<img src="./images/22.jpg" id="img" alt="jQueryでフェードインとフェードアウト効果を実現する方法" >
</body>
</html>レンダリング:
について参照しています。 jQuery のフェードインとフェードアウト jQuery チュートリアル マニュアルの セクション
以上がjQueryでフェードインとフェードアウト効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。