...

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