JavaScript DHTML/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>
Fade in/out dialog
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("input#tmpOpen").click(
function($e) {
$("div#myDialog").fadeIn(5000);
}
);
$("input#tmpClose").click(
function($e) {
$("div#myDialog").fadeOut(5000);
}
);
}
);
</script>
<style type="text/css">
div#myDialog {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 200px;
margin: -100px 0 0 -250px;
background: rgb(233, 233, 233);
border: 1px solid rgb(128, 128, 128);
}
div#tmpButtons {
position: absolute;
bottom: 5px;
right: 5px;
}
</style>
</head>
<body>
<input type="submit" id="tmpOpen" value="Open" />
<div id="myDialog">
<p>
Dialog content
</p>
<div id="tmpButtons">
<input type="submit" id="tmpClose" value="Close" />
</div>
</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>