JavaScript Tutorial/jQuery/slideDown
Содержание
Hide and Slide down
<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").hide();
$("p").slideDown();
});
});
</script>
</head>
<body>
<body>
Hello
</body>
</html></source>
Slide down and set focus
<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").click(function () {
$("input").slideDown(1000,function(){
$(this).focus();
});
});
});
</script>
<style>
input { display:none;margin:10px; }
</style>
</head>
<body>
<body>
Click me
<input type="text" />
<input type="text"/>
<input type="text" />
</body>
</html></source>
Slide down fast
<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").hide();
$("p").slideDown("fast");
});
});
</script>
</head>
<body>
<body>
Hello
</body>
</html></source>
Slide down form fields
<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").click(function () {
$("input").slideDown(1000,function(){
$(this).focus();
});
});
});
</script>
<style>
input { display:none;margin:10px; }
</style>
</head>
<body>
<body>
Click me
<input type="text" />
<input type="text"/>
<input type="text" />
</body>
</html></source>
Slide down 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(){
$("p").click(function () {
$("p").hide();
$("p").slideDown(10000);
});
});
</script>
</head>
<body>
<body>
Hello
</body>
</html></source>
Slide down slowly
<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").hide();
$("p").slideDown("slow");
});
});
</script>
</head>
<body>
<body>
Hello
</body>
</html></source>
slideDown(speed, callback): Only the height 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(){
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
}); </script> </head> <body> <body>
asdf
asdf
asdf
asdf
</body>
</html></source>
Slide to show para
<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").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.
asdf
asdf
asdf
asdf
asdf
asdf
</body>
</html></source>
