jQuery Sliding Effects

jQuery Sliding Effects


jQuery has 3 useful sliding effects .slideDown(),.slideToggle() and .slideUp() methods.They will show or hide the DOM elements with sliding effect.


jQuery slide Description

methoddescription
slideDown()jQuery slideDown() method is used to show the hidden HTML element where it looks like the content is getting shown by sliding down.
slideToggle()Display or hide the matched elements with a sliding motion.
slideUp()Hide the matched elements with a sliding motion.

jQuery Sliding Effects examples

slideDown() Examples

//  hide < p > elements in sliding mode:
$("p").slideDown();
// Slowly slide down the paragraph 
$("p").slideDown("slow");
// Quickly slide the paragraph down, and then pop up a dialog box
$("p").slideDown("fast",function(){
   alert("Animation Done.");
 });

slideToggle() Examples

// Slowly slide up or down a paragraph 
$("p").slideToggle("slow");

slideUp() Examples

// Slowly slide up the paragraph 
$("p").slideUp("slow");
// Quickly slide up the paragraph, and then pop up a dialog box
$("p").slideUp("fast",function(){
   alert("Animation Done.");
});
date2019-04-02 22:37:57 From:www.jquerypluginhub.com Author:JPH
Related Tags:
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *