Heim > Artikel > Web-Frontend > So implementieren Sie das automatische Ausblenden in fünf Sekunden mit jquery
So implementieren Sie das automatische Ausblenden in fünf Sekunden mit jquery
- 青灯夜游Original
- 2022-05-16 15:01:341722Durchsuche
Zwei Methoden: 1. „setTimeout(function(){specified object.hide();},5000);“-Anweisung, um einen Verzögerungseffekt durch Einstellen eines Timers zu erzielen. 2. Verwenden Sie die Anweisung „specified object.delay(5000).fadeOut();“, um den Effekt durch Verzögerung der Codeausführungszeit zu erzielen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.
jquery implementiert das automatische Ausblenden für fünf Sekunden.
1. Verwenden Sie die Methode setTimeout(). Verwenden Sie die Methode setTimeout(), um die Methode function() nach 5 Sekunden festzulegen die Methode function() Verwenden Sie im Inneren die Methode hide(), um das angegebene Element zu implementieren.
$(document).ready(function() {
$("button").click(function() {
setTimeout(function() {
$("div").hide();
}, 5000);
});
});
<!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>
【Empfohlenes Lernen: jQuery-Video-Tutorial,
Web-Frontend-Video】
Das obige ist der detaillierte Inhalt vonSo implementieren Sie das automatische Ausblenden in fünf Sekunden mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!