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>