Heim > Artikel > Web-Frontend > jquery implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen
jquery implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen
- 青灯夜游Original
- 2022-04-20 17:33:011680Durchsuche
Implementierungsmethode: 1. Verwenden Sie die Anweisung „$(“img“).delay(milliseconds).fadeOut()“ und „delay()“, um die Verzögerungssekunden festzulegen. 2. Verwenden Sie „setTimeout(function(){ $(“ img ").hide(); }, Millisekundenwert);" Anweisung, durch Timer verzögert.
Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.
Manchmal muss die Seite einige dynamische Effekte hinzufügen, indem eine Verzögerung von einigen Sekunden verwendet wird, um das Bild auszublenden und nach der Anzeige für eine bestimmte Anzahl von Sekunden zu verschwinden. Hier zeigen wir Ihnen, wie Sie mit jQuery die angegebene Anzahl von Sekunden festlegen (5 Sekunden), bevor Sie das Bild ausblenden.
Methode 1: Verwenden Sie die Methode .delay()
, um das IMG-Bild so einzustellen, dass es ausgeblendet wird, nachdem es 5 Sekunden lang angezeigt wurde.
<!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 implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen" >
<br><br>
<button>实现5秒后隐藏图片</button>
</body>
</html>
Methode 2: Verwenden Sie die Methode setTimeout()
Verwenden Sie setTimeout(), um einen Timer einzustellen, der das Bild ausblendet, nachdem es 5 Sekunden lang angezeigt wurde.
<!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 implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen" >
<br><br>
<button>实现5秒后隐藏图片</button>
</body>
</html>
【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video】
Das obige ist der detaillierte Inhalt vonjquery implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!