JavaScript Tutorial/jQuery/fadeOut
Версия от 18:52, 25 мая 2010; (обсуждение)
Содержание
Fade out in 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 () {
$(this).fadeOut(2000);
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
Fade out show
<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>
<div></div>
</body>
</html>
fadeOut(speed, callback): Only the opacity is adjusted for this animation
<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>
<p>
fade away.
</p>
</body>
</html>
Fade out this
<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>
<div>Click me<button>button</button></div>
</body>
</html>
Fast fade out
<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>
<div>Click me<button>button</button></div>
</body>
</html>
Slow fade out
<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>
<div>Click me<button>button</button></div>
</body>
</html>