JavaScript Tutorial/jQuery/slideDown
Содержание
Hide and Slide down
<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").hide();
$("p").slideDown();
});
});
</script>
</head>
<body>
<body>
<p>Hello</p>
</body>
</html>
Slide down and set focus
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
$("input").slideDown(1000,function(){
$(this).focus();
});
});
});
</script>
<style>
input { display:none;margin:10px; }
</style>
</head>
<body>
<body>
<div>Click me</div>
<input type="text" />
<input type="text"/>
<input type="text" />
</body>
</html>
Slide down 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 () {
$("p").hide();
$("p").slideDown("fast");
});
});
</script>
</head>
<body>
<body>
<p>Hello</p>
</body>
</html>
Slide down form fields
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
$("input").slideDown(1000,function(){
$(this).focus();
});
});
});
</script>
<style>
input { display:none;margin:10px; }
</style>
</head>
<body>
<body>
<div>Click me</div>
<input type="text" />
<input type="text"/>
<input type="text" />
</body>
</html>
Slide down in milliseconds
<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").hide();
$("p").slideDown(10000);
});
});
</script>
</head>
<body>
<body>
<p>Hello</p>
</body>
</html>
Slide down slowly
<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").hide();
$("p").slideDown("slow");
});
});
</script>
</head>
<body>
<body>
<p>Hello</p>
</body>
</html>
slideDown(speed, callback): Only the height 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(){
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
});
</script>
</head>
<body>
<body>
<div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
</body>
</html>
Slide to show para
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").one("click", function () {
if ($(this).is(":first-child")) {
$("p").text("It"s the first div.");
}else{
$("p").text("It"s NOT the first div.");
}
$("p").hide().slideDown("slow");
});
});
</script>
<style>
div { border:2px white solid;}
</style>
</head>
<body>
<body>
Press each to see the text.
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<p></p>
</body>
</html>