Best way to use jQuery Effects - Hide and Show

Best way to use jQuery Effects – Hide and Show


The jQuery library provides several techniques for adding animation to a web page. The best way to use jQuery effects – Hide and Show effects which will provide to do various kind of amazing effects with a web interface. The jQuery API has many jQuery methods allow us to quickly apply commonly used effects, the jQuery effects. This tutorial deals with important jQuery effects which will show you the best way to use jQuery effects – Hide and Show.

Showing and Hiding Elements with jQuery

There are following two functions, hide() and show() for showing and hiding any DOM elements (DOM element is something like a DIV, HTML, BODY element on a page).

Syntax:

.show( duration [, easing ] [, complete ] ) 
.hide( duration [, easing ] [, complete ] )

jQuery Effects - Hide and Show demo

Where the meanings are:

  • duration (default: 400)
  • Type: Number or String
  • A string or number determining how long the animation will run.
  • easing (default: swing)
  • Type: Number or String
  • A string or number determining how long the animation will run.
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

Leave a Reply

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