JavaScript Tutorial/jQuery/slideToggle
Содержание
30. Fast slide toggle
<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).slideToggle("fast");
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
30. Slide animation
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
});
</script>
<style>
div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
</style>
</head>
<body>
<div></div>
<div id="mover"></div>
<div></div>
</body>
</html>
30. Slide toggle and function
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
});
</script>
<style>
div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
</style>
</head>
<body>
<div></div>
<div id="mover"></div>
<div></div>
</body>
</html>
30. Slide toggle button
<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).slideToggle();
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
30. Slide toggle callback
<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).slideToggle("slow",function () {
alert("done");
});
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
30. Slide toggle 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).slideToggle(2000);
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
30. Slide toggle slow
<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).slideToggle("slow");
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
30. slideToggle(speed, callback): height is adjusted
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("p").slideToggle("slow");
});
});
</script>
</head>
<body>
<body>
<button>Toggle</button>
<p>
This is the paragraph.
</p>
</body>
</html>