JavaScript Tutorial/jQuery/hide
Содержание
Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function () { $("p").hide("slow"); }); }); </script> </head> <body> <body> <button>Hide</button>
asdf
</body>
</html></source>
Click to hide
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){
$("p").click(function () { $(this).hide(); return true; });
}); </script> </head> <body> <body>
Hello
</body>
</html></source>
Hide and remove
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){
$("p").hide(2000, function () { $(this).remove(); });
}); </script> </head> <body> <body>
Hello
</body>
</html></source>
Hide a tag
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").hide();
}); </script> </head> <body> <body>
Hello
</body>
</html></source>
Hide fast
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){
$("p").click(function () { $(this).hide("fast"); return true; });
}); </script> </head> <body> <body>
Hello
</body>
</html></source>
Hide in millisecond
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){
$("p").click(function () { $(this).hide(2000); return true; });
}); </script> </head> <body> <body>
Hello
</body>
</html></source>
Puff an image
<source lang="javascript">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/effects.core.js"></script> <script type="text/javascript" src="js/ui/effects.scale.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $("#loading").click(function() { $(this).hide("puff"); }); }); </script>
</head> <body> <img id="loading" alt="Loading" src="http://www.wbex.ru/style/logo.png"> </body> </html></source>