jqueryで2秒後に消える関数を実装する方法

誰もが知っているように、時間は Web デザインにおいて非常に重要な要素です。場合によっては、成功プロンプトやエラー プロンプトなどのプロンプト情報を Web ページに表示する必要がありますが、これらの情報は常にページ上に存在する必要はなく、ユーザーの目の前で点滅するだけで十分です。目。

それでは、そのような即時情報をページに実装する方法を考えましたか?今日は、jquery の「fadeOut」メソッドを見ていきます。その単純なコードを使用することで、この効果を簡単に実現できます。

まず第一に、jquery について簡単に見てみましょう。これは、JavaScript に基づいて高速、小型、強力で美しく設計された JavaScript ライブラリです。元々は、2006 年に John Resig によって開発されました。 1 月、Web ウェブサイトのフロントエンド開発で広く使用されています。これにより、ユーザーは HTML ドキュメントの操作、イベントの処理、アニメーション効果の作成、Ajax プログラムの実装などをより便利に行うことができます。

「fadeOut」メソッドはjqueryに用意されている、時間間隔を設定して要素のフェードアウトを実現するメソッドですので、詳しい使い方を見てみましょう。

まず、jquery ライブラリを参照する必要があります。これは次の方法で導入できます。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

次に、プロンプトのコンテナとしてページに div 要素を追加する必要があります。

<div id="tip">这是一个提示信息！</div>

次に、JavaScript で次のコードを記述できます:

$(document).ready(function(){
  // 2秒后元素消失
  $("#tip").fadeOut(2000);
});

上記のコードをステップごとに説明しましょう:

まず、 「$(document).ready ()」関数を使用して、ページの HTML ドキュメントがロードされていることを確認し、要素を操作できるようにします。

「$("#tip")」セレクターを使用して追加した div 要素を取得し、「fadeOut()」メソッドを使用してフェードインおよびフェードアウトします。ここで、2000 は要素が必要であることを意味します2秒以内に消えます。

上記の方法により、ページ上にプロンプ​​ト ボックスを 2 秒間だけ表示する効果を非常に簡単に実現できます。

さらに、「fadeIn()」メソッドを使って要素をフェードアウトさせることもできます。最後に、以下の完全なコードを見て、「fadeOut」メソッドの魅力を感じてください:

  
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  


  <div id="tip">这是一个提示信息！</div>

つまり、jquery は非常に優れた JavaScript ライブラリとして、Web フロントの開発に多くの利便性を提供します。 -終わり。 「fadeOut」メソッドを使用すると、非常にシンプルで使いやすくなります。以上が今回の記事での共有内容となりますが、皆様の学習の一助となるとともに、関連するフロントエンド開発技術に今後も注目し、継続的にスキルレベルの向上を図っていただければ幸いです。

以上がjqueryで2秒後に消える関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。