Comment implémenter la fonction disparaître après deux secondes dans jquery

Comme nous le savons tous, le temps est un élément très important dans la conception de sites Web. Parfois, nous devons afficher des informations d'invite sur la page Web, telles que des invites de réussite, des invites d'erreur, etc., mais ces informations n'ont pas besoin de rester sur la page tout le temps, elles doivent simplement clignoter devant l'utilisateur. yeux.

Nous avons donc réfléchi à la manière de mettre en œuvre un message aussi rapide sur la page ? Aujourd'hui, nous allons examiner la méthode "fadeOut" de jquery. En utilisant son code simple, nous pouvons facilement obtenir cet effet.

Tout d'abord, jetons un bref coup d'œil à jquery. Il s'agit d'une bibliothèque JavaScript rapide, petite, puissante et magnifiquement conçue, basée sur JavaScript. Elle a été initialement publiée par John Resig en janvier 2006. Et est largement utilisée devant. mettre fin au développement de sites Web. Il permet aux utilisateurs d'utiliser plus facilement des documents HTML, de gérer des événements, de créer des effets d'animation, d'implémenter des programmes Ajax, etc.

La méthode "fadeOut" est une méthode fournie dans jquery pour réaliser le fondu des éléments en définissant un intervalle de temps. Jetons un coup d'œil à son utilisation détaillée.

Tout d'abord, nous devons référencer la bibliothèque jquery, qui peut être introduite de la manière suivante :

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

Ensuite, nous devons ajouter un élément div à la page en tant que conteneur pour notre boîte d'invite. Le code est le suivant :

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

Ensuite, nous pouvons ajouter du JavaScript Écrivez le code suivant dans :

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

Expliquons le code ci-dessus étape par étape :

Tout d'abord, nous utilisons la fonction "$(document).ready()" pour nous assurer que le code HTML Le document de la page a été chargé, puis nous pouvons charger les éléments Effectuer des opérations.

Utilisez le sélecteur "$("#tip")" pour obtenir l'élément div que nous venons d'ajouter, et utilisez la méthode "fadeOut()" pour le faire apparaître et disparaître, où 2000 signifie que nous voulons que l'élément disparaisse dans 2 secondes.

Grâce à la méthode ci-dessus, nous pouvons très facilement obtenir l'effet d'afficher une boîte de dialogue sur la page pendant seulement 2 secondes.

De plus, nous pouvons également utiliser la méthode "fadeIn()" pour faire disparaître des éléments. Je pense que vos lecteurs seront très intéressés ! Enfin, veuillez regarder le code complet ci-dessous pour ressentir le charme de la méthode "fadeOut" :

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


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

En bref, jquery, en tant que très excellente bibliothèque JavaScript, offre beaucoup de commodité pour le développement front-end Web. L'utilisation de la méthode "fadeOut" le rend très simple et facile à utiliser. Ce qui précède est le contenu partagé dans cet article. J'espère qu'il sera utile à l'apprentissage de chacun. En même temps, j'espère également que chacun pourra continuer à prêter attention aux technologies de développement front-end associées et à améliorer continuellement ses niveaux de compétences.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!