jQuery has several methods that can be used to create a variety of sliding animation effects. The use of jQuery among web designers continues to be growing in popularity.
With regard to basic sliding techniques, the typical methods used are slideDown(), slideUp(), and slideToggle().
Syntax
$(selector).slideDown(speed,easing,callback)
$(selector).slideUp(speed,easing,callback)
$(selector).slideToggle(speed,easing,callback)| Parameter | Description |
|---|---|
speed | Optional values in milliseconds, slow, normal, and fast. |
easing | Indicates which easing function (swing/linear) to use for the transition. |
callback | An optional function to run after the method is completed. |
HTML Example
We will use the following HTML for the examples listed below.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="slideDown.png" />
<img id="img2" src="slideUp.png" />
<img id="img3" src="toggle.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Example
In the following example, we will use the click event to trigger the slideDown(), slideUp(), and slideToggle() methods on the div element adjacent to the images.
You will also notice that we modify the source attribute of img3 when the div element is either in a show or hidden state.
<script type="text/javascript">
$("#img1").click(function(){
$("div").slideDown();
$("#img3").attr("src", "collapse.png");
});
$("#img2").click(function(){
$("div").slideUp();
$("#img3").attr("src", "expand.png");
});
$("#img3").click(function () {
$("#div1").slideToggle("slow");
var $img = $("#img3")
if ($img.attr("src") == "expand.png") {
$img.attr("src", "collapse.png");
} else {
$img.attr("src", "expand.png");
}
});
</script> 
