Heim >Web-Frontend >js-Tutorial >JQuery-Animation hide() und show() Verwendungserklärung 1 (Codebeispiel)
Der Inhalt dieses Artikels befasst sich mit der Verwendung von hide() und show() in der JQuery-Animation (Codebeispiel). Ich hoffe, dass er für Sie nützlich ist . Hilft.
Die Methoden hide() und show() können Animationseffekte festlegen. In diesem Artikel werden die Auswirkungen dieser beiden Methoden erläutert.
hide (Parameter 1, Parameter 2):
Parameter 1: Zeit in Millisekunden, die die Zeit angibt, die benötigt wird, bis das Objekt ausgeblendet wird
Parameter 2: Rückruf Funktion, diese Funktion wird ausgelöst, nachdem das Objekt ausgeblendet wurde.
show(Parameter 1, Parameter 2):
Parameter 1: Wie oben
Parameter 2: Wie oben
Beispiel:
Anforderungsbeschreibung: Klicken Sie auf ein Bild, das Bild wird langsam ausgeblendet und dann von der Seite gelöscht. Das letztere Bild ergänzt die Position des vorherigen Bildes
Der Code lautet wie folgt:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> img{ width: 100px; height: 80px; } #pics div{ float: left; margin: 2px; width: 100px; height: 80px; } </style> <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script> <script> $(function(){ //获取所有的图片,并注册点击事件 $("#pics>div").click(function(){ $(this).hide(800,function(){ //回调函数,清除当前点击的元素 $(this).remove();//方法移除当前调用这个方法的元素---自杀 }); }); }); </script> </head> <body> <div id="pics"> <div><img src="images/01.jpg" ></div> <div><img src="images/02.jpg" ></div> <div><img src="images/03.jpg" ></div> <div><img src="images/04.jpg" ></div> <div><img src="images/05.jpg" ></div> </div> </body> </html>
Hinweis:
$(this).remove();//方法移除当前调用这个方法的元素---自杀
Das obige ist der detaillierte Inhalt vonJQuery-Animation hide() und show() Verwendungserklärung 1 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!