ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryでフェードインおよびフェードアウト効果を実現する方法

jqueryでフェードインおよびフェードアウト効果を実現する方法

coldplay.xixi
coldplay.xixiオリジナル
2020-11-27 10:55:124333ブラウズ

フェードインおよびフェードアウト効果を実現するための jquery メソッド: 最初に新しいテキスト ドキュメントを作成し、jquery を導入します。次に、メソッド [fadeIn()] を使用して非表示の要素をフェードインします。最後に、メソッド [fadeOut()] を使用して、表示されている要素をフェードアウトします。

jqueryでフェードインおよびフェードアウト効果を実現する方法

このチュートリアルの動作環境: Windows 7 システム、jquery バージョン 3.2.1、Dell G3 コンピューター。

jquery を使用してフェードインおよびフェードアウト効果を実現する方法:

1. に示すように、コードの表示と書き込み用に新しいテキスト ドキュメントを作成します。図;

jqueryでフェードインおよびフェードアウト効果を実現する方法

2. 図に示すように、ID div1 と div2 を持つ 2 つの div を作成します;

jqueryでフェードインおよびフェードアウト効果を実現する方法

3 jquery.jsを導入して接続します 次に使用します、図のように、

jqueryでフェードインおよびフェードアウト効果を実現する方法

4, fadeIn() メソッドでフェードインすることができます。図に示すように、非表示の要素。

jqueryでフェードインおよびフェードアウト効果を実現する方法

##5、

fadeOut() メソッドは、図に示すように、表示されている要素をフェードアウトできます。

jqueryでフェードインおよびフェードアウト効果を実現する方法#6,

fadeToggle()

メソッド、非表示の場合はフェードイン、表示されている場合はフェードアウト;

jqueryでフェードインおよびフェードアウト効果を実現する方法7,

fadeTo ("slow",0.4)

は、図に示すように、指定された不透明度にグラデーションすることができます

jqueryでフェードインおよびフェードアウト効果を実現する方法

関連する学習に関する推奨事項:
JavaScript ビデオ チュートリアル

以上がjqueryでフェードインおよびフェードアウト効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。