JavaScript Tutorial/jQuery/hide
Содержание
Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.
<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>
<p>asdf</p>
</body>
</html>
Click to hide
<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>
<p>Hello</p>
</body>
</html>
Hide and remove
<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>
<p>Hello</p>
</body>
</html>
Hide a tag
<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>
<p>Hello</p>
</body>
</html>
Hide fast
<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>
<p>Hello</p>
</body>
</html>
Hide in millisecond
<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>
<p>Hello</p>
</body>
</html>
Puff an image
<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>