Maison >interface Web >js tutoriel >Résumé de l'utilisation de slideUp(), slideDown(), hide(), show() dans jQuery
slideUp(speed,[callback])
Masquez dynamiquement tous les éléments correspondants en modifiant la hauteur (en diminuant vers le haut), en déclenchant éventuellement une fonction de rappel.
Cet effet d'animation ajuste uniquement la hauteur de l'élément et peut masquer l'élément correspondant de manière "coulissante". slideDown(speed,[callback])Affiche dynamiquement tous les éléments correspondants via des changements de hauteur (augmente vers le bas), déclenchant éventuellement une fonction de rappel une fois l'affichage terminé. Cet effet d'animation ajuste uniquement la hauteur de l'élément, permettant d'afficher les éléments correspondants de manière "coulissante"<head> <title>slideUp()和slideDown()</title> <style type="text/css"> <!-- body{ background:url(bg.jpg); } img{ border:1px solid #000000; margin:8px; } input{ border:1px solid #000000; font-size:13px; padding:2px; font-family:Arial, Helvetica, sans-serif; background-color:#FFFFFF; color:#000000; } p{ background-color:#FFFF00; height:80px; width:80px; border:1px solid #000000; float:left; margin-top:8px; } --> </style> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ $("input:eq(0)").click(function(){ $("p").add("img").slideUp(1000); }); $("input:eq(1)").click(function(){ $("p").add("img").slideDown(1000); }); $("input:eq(2)").click(function(){ $("p").add("img").hide(1000); }); $("input:eq(3)").click(function(){ $("p").add("img").show(1000); }); }); </script> </head> <body> <input type="button" value="SlideUp"> <input type="button" value="SlideDown"> <input type="button" value="Hide"> <input type="button" value="Show"><br> <p></p><img src="test.jpg"> </body>
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!