Heim > Artikel > Web-Frontend > So lassen Sie Bilder mit JQuery nach und nach verschwinden
So lassen Sie Bilder mit JQuery nach und nach verschwinden
- 青灯夜游Original
- 2022-04-21 14:50:022394Durchsuche
So verblassen Sie: 1. Verwenden Sie fadeOut(), legen Sie einfach die Anzahl der Millisekunden vom Sichtbarwerden bis zum Verschwinden fest. Die Syntax lautet „$(„img“).fadeOut(Anzahl der Millisekunden)“ 2. Verwenden Sie fadeTo(); Zum Festlegen reduzieren Sie einfach die Transparenz in der angegebenen Anzahl von Millisekunden auf 0. Die Syntax lautet „$(„img“).fadeTo(Anzahl der Millisekunden, 0)“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.
jquery lässt das Bild allmählich verschwinden
Methode 1: Verwenden Sie fadeOut() – lassen Sie das Bild allmählich verschwinden, ohne Platz zu beanspruchen. Die Methode „fadeOut()“ verwendet den Ausblendeffekt, um die Auswahl auszublenden element
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("img").fadeOut(3000);
});
});
</script>
</head>
<body>
<img src="img/3.jpg" style="max-width:90%" / alt="So lassen Sie Bilder mit JQuery nach und nach verschwinden" ><br><br>
<button>让图片逐渐消失</button>
</body>
</html>
Methode 2: Verwenden Sie fadeTo() – den Platzhalter, um das Bild allmählich verschwinden zu lassen
Die Methode fadeTo() ändert schrittweise die Deckkraft des ausgewählten Elements auf den angegebenen Wert.
Reduzieren Sie einfach die endgültige Transparenz auf 0.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("img").fadeTo(3000,0);
});
});
</script>
</head>
<body>
<img src="img/3.jpg" style="max-width:90%" / alt="So lassen Sie Bilder mit JQuery nach und nach verschwinden" ><br><br>
<button>让图片逐渐消失</button>
</body>
</html>
【Empfohlenes Lernen: 
jQuery-Video-Tutorial
Web-Frontend-Video】
Das obige ist der detaillierte Inhalt vonSo lassen Sie Bilder mit JQuery nach und nach verschwinden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!