Maison > interface Web > Questions et réponses frontales > Comment implémenter le masquage automatique en cinq secondes avec jquery

Comment implémenter le masquage automatique en cinq secondes avec jquery

青灯夜游
Libérer: 2022-05-16 15:02:30
original
1777 Les gens l'ont consulté

Deux méthodes : 1. Instruction "setTimeout(function(){specified object.hide();},5000);" pour obtenir un effet de retard en réglant une minuterie. 2. Utilisez l'instruction "specified object.delay(5000).fadeOut();" pour obtenir l'effet en retardant le temps d'exécution du code.

Comment implémenter le masquage automatique en cinq secondes avec jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

jquery implémente un masquage automatique pendant cinq secondes

1. Utilisez la méthode setTimeout()

  • Utilisez la méthode setTimeout() pour définir la méthode function() après 5 secondes

  • In la méthode function() À l'intérieur, utilisez la méthode hide() pour implémenter l'élément spécifié.

$(document).ready(function() {
	$("button").click(function() {
		setTimeout(function() {
			$("div").hide(); 
		}, 5000);
	});
});
Copier après la connexion

Comment implémenter le masquage automatique en cinq secondes avec jquery

Description : La méthode

setTimeout() est utilisée pour appeler une fonction ou une expression calculée après un nombre spécifié de millisecondes.

setTimeout() n'exécute le code qu'une seule fois. Si vous souhaitez l'appeler plusieurs fois, utilisez setInterval() ou demandez au code lui-même d'appeler à nouveau setTimeout().

2. Utilisez delay() pour définir cinq secondes pour masquer automatiquement les éléments

La méthode delay() définit un délai pour l'exécution de l'élément suivant dans la file d'attente.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.block {
			  width: 200px;
			  height: 200px;
			  background: brown;
			  cursor: pointer;
			  transition: 0.8s;
			}
		</style>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("div").delay(5000).fadeOut();
				});
			});
		</script>
	</head>
	<body>
		<div class="block"></div><br>
		<button>5秒隐藏div元素</button>
	</body>
</html>
Copier après la connexion

Comment implémenter le masquage automatique en cinq secondes avec jquery

【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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal