Maison > Article > interface Web > jquery implémente le nombre de secondes pour masquer les images après
jquery implémente le nombre de secondes pour masquer les images après
- 青灯夜游original
- 2022-04-20 17:33:011591parcourir
Méthode d'implémentation : 1. Utilisez l'instruction "$("img").delay(milliseconds).fadeOut()" et delay() pour définir le délai en secondes ; 2. Utilisez "setTimeout(function(){ $(" img ").hide(); }, valeur en millisecondes);" instruction, retardée par une minuterie.
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.
Parfois, la page doit ajouter des effets dynamiques, en utilisant un délai de quelques secondes pour masquer l'image et disparaître après l'avoir affichée pendant un nombre de secondes spécifié. Nous vous montrons ici comment utiliser jQuery pour définir le nombre de secondes spécifié. (5 secondes) avant de masquer l'image.
Méthode 1 : utilisez la méthode .delay()
pour que l'image img soit masquée après avoir été affichée pendant 5 secondes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("img").delay(5000).fadeOut();
});
});
</script>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="jquery implémente le nombre de secondes pour masquer les images après" >
<br><br>
<button>实现5秒后隐藏图片</button>
</body>
</html>
Méthode 2 : utilisez la méthode setTimeout()
Utilisez setTimeout() pour définir une minuterie afin de masquer l'image après l'avoir affichée pendant 5 secondes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
setTimeout(function() { $("img").hide(); }, 5000);
});
});
</script>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="jquery implémente le nombre de secondes pour masquer les images après" >
<br><br>
<button>实现5秒后隐藏图片</button>
</body>
</html>
【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】
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!