Home

jQuery Effects And Animations

Slide Up / Slide Down

jQuery Effects: slideUp, slideDown and slideToggle

SYNTAX: $(“CSS selector”).slideUp(speed), $(“CSS selector”).slideDown(speed), and $(“CSS selector”).slideToggle(speed)

There are yet another three additional jQuery effects that are used by many developers/designers: slideUp, slideDown and slideToggle. As you may have suspected, their functionalities (e.g., speed, toggle) are similar to the show/hide, fadeIn/fadeOut and toggle methods discussed in the previous two sections.

Also as expected, they will cause an object to SLIDE OUT or SLIDE IN of view from bottom to top or top to bottom, respectively. Like the fadeIn and fadeOut methods, if a speed value parameter is not given it will default to a normal speed of 400 ms or 0.4 second because it needs TIME to bring the object into view.  Like the other toggle methods, the toggleSlide method is used when you need a single interaction (e.g., button click, mouse hover) to toggle between the two effects.

  1. Copy the Toggle Fade Box button code and paste it three additional times on the next line and modify the code to read:

    <button id = "toggleFadeBoxButton"> Toggle Fade Box</button><br>
    <button id = "slideUpBoxButton"> SlideUp Box</button><br>
    <button id = "slideDownBoxButton"> SlideDown Box</button><br>
    <button id = "slideToggleBoxButton"> Slide Toggle Box</button><br>

  2. Copy the Toggle Fade Box code and paste it three times below the current code and modify the code to read:

    $("#toggleFadeBoxButton").click(function(){
    $("#myBox").toggleFade();
    }); // end of toggleFadeBoxButton click event handler

    $("#slideUpBoxButton").click(function(){
    $("#myBox").slideUp();
    }); // end of slideUpBoxButton click event handler

    $("#slideDownBoxButton").click(function(){
    $("#myBox").slideDown();
    }); // end of slideDownBoxButton click event handler

    $("#slideToggleBoxButton").click(function(){
    $("#myBox").slideToggle();
    }); // end of slideToggleBoxButton click event handler

  3. CHECK POINT: Save the file and test the page in a browser by first clicking on each of the buttons. You should see the red box slide up, slide down, and slide toggle, respectively.

    Optional: Like the Show/Hide and fadeIn/fadeOut buttons, you can delete the Slide Up or Slide Down buttons since they are no longer needed.

(OPTIONAL) Adding an optional speed parameter

All of the effects mentioned so far have an optional parameter that can be added to define its speed that represents that amount of time the effect takes to complete.

SYNTAX: $(“CSS selector”).effectName(time in ms or keyword)

  1. Add two seconds to each of the code blocks (three or nine in total depending if you deleted the optional buttons) similar to this:

    $("#slideToggleBoxButton").click(function(){
    $("#myBox").slideToggle(2000);
    }); // end of slideToggleBoxButton click event handler

    NOTE: 2000 ms = 2 seconds, 10,000ms = 10 seconds, 500ms = 0.5 second, etc.

  2. CHECK POINT: Save the file and test the page in a browser by clicking on each of the buttons. You should see that the effect's speed is different than before.

    NOTE: You can also use keywords instead of numerical values:

    KEY WORD

    MILLISECONDS

    SECOND

    "fast"

    200 ms

     0.2 second

    "normal"

    400 ms

     0.4 second

    "slow"

    600 ms

     0.6 second

(OPTIONAL) Make buttons look consistent

Currrently, because the text in each of the button varies, it would be nice to make them consistent.

  1. Add one or more of the following highlighted CSS rules to the button selector in the <style> tag:

    <style>
    #myBox{width:100px; height:100px; background:red; position:absolute; left:200px;}
    button{width:125px; border: 1px solid blue;}
    </style>

  2. CHECK POINT: Save the file and test the page in a browser. You should see the each of the button are the size size with a thin blue line around each of them.


< Previous Topic     Next Topic >