JavaScript Tutorial/jQuery/fadeOut
Содержание
Fade out in 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 () { $(this).fadeOut(2000); });
}); </script> </head> <body> <body>
Click me<button>button</button>
</body>
</html></source>
Fade out show
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").text("selected").show().fadeOut(1000); }); </script> </head> <body> <body>
</body>
</html></source>
fadeOut(speed, callback): Only the opacity is adjusted for this animation
<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 () { $("p").fadeOut("slow"); });
}); </script> </head> <body> <body>
fade away.
</body>
</html></source>
Fade out this
<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 () { $(this).fadeOut(); });
}); </script> </head> <body> <body>
Click me<button>button</button>
</body>
</html></source>
Fast fade out
<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 () { $(this).fadeOut("fast"); });
}); </script> </head> <body> <body>
Click me<button>button</button>
</body>
</html></source>
Slow fade out
<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 () { $(this).fadeOut("slow"); });
}); </script> </head> <body> <body>
Click me<button>button</button>
</body>
</html></source>