JavaScript Tutorial/jQuery/fadeIn
Содержание
Fade in callback
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").fadeIn(1000, function () {
alert("done");
});
});
</script>
</head>
<body>
<body>
<div style="display:none;">Click me</div>
</body>
</html>
Fade in controlled by milliseconds
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").fadeIn(2000);
});
</script>
</head>
<body>
<body>
<div style="display:none;">Click me</div>
</body>
</html>
Fast fade in
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").fadeIn("fast");
});
</script>
</head>
<body>
<body>
<div style="display:none;">Click me</div>
</body>
</html>
Header fade in
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").css("opacity", 1).fadeIn(30).fadeOut(1000);
});
</script>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
</body>
</html>
Slow fade in
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").fadeIn("slow");
});
</script>
</head>
<body>
<body>
<div style="display:none;">Click me</div>
</body>
</html>