...

Library - JQuery

Back to Course

Lesson Description


Lession - #561 JQuery Slide

The jQuery slideToggle(>
method toggles between the slideDown(>
and slideUp(>
methods. If the weather are slid down, slideToggle(>
can slide them up. If the elements are softened up, slideToggle(>
will slide them down. $(selector>
. slideToggle(speed,callback>
;

jQuery slideUp(>
and slideDown(>
methods
The jQuery slideUp(>
and slideDown(>
methods is employed to hide or show the HTML elements by step by step decreasing or increasing their height (i.e. by sliding them up or down>
.

Example


<html>  
<head> 
 <title> jQuery Example</title>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <style>
    
</style>
 <script type="text/javascript" language="javascript">  
 
 
 $(document>
.ready(function(>
{
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn">
.click(function(>
{
        $("p.normal">
.slideUp(>
;
        $("p.fast">
.slideUp("fast">
;
        $("p.slow">
.slideUp("slow">
;
        $("p.very-fast">
.slideUp(50>
;
        $("p.very-slow">
.slideUp(2000>
;
    }>
;
    
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn">
.click(function(>
{
        $("p.normal">
.slideDown(>
;
        $("p.fast">
.slideDown("fast">
;
        $("p.slow">
.slideDown("slow">
;
        $("p.very-fast">
.slideDown(50>
;
        $("p.very-slow">
.slideDown(2000>
;
    }>
;
}>
;
     
	   
 </script> 
 </head>  
<body>  
  <button type="button" class="up-btn">Slide Up Paragraphs</button>
    <button type="button" class="down-btn">Slide Down Paragraphs</button>
    <p class="very-fast">This paragraph will fade in/out with very fast speed.</p>
    <p class="normal">This paragraph will fade in/out with default speed.</p>
    <p class="fast">This paragraph will fade in/out with fast speed.</p>
    <p class="slow">This paragraph will fade in/out with slow speed.</p>
    <p class="very-slow">This paragraph will fade in/out with very slow speed.</p>
  
	
</body> 
</html>
Try it here

JQuery Fade JQuery Animate