Did you find this useful?
Socialize it today.


jQuery Sliding Effects

Sunday, July 08, 2012

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)


ParameterDescription
speedOptional values in milliseconds, "slow", "normal", and "fast".
easingIndicates which easing function (swing/linear) to use for the transition
callbackAn 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. Click on the various icons below to slide down, slide up, and slide toggle the div element.


<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> 


slide up slide down slide toggle
Click the icons to show, hide, or toggle this element.


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Pro jQuery HTML CSS and JavaScript Editor JavaScript and jQuery: The Missing Manual