jQuery Effects Hide Method – jQuery


title: jQuery Effects Hide Method

jQuery Hide Method

In its simplest form, .hide() hides the matched element immediately, with no animation. For example:

$(".myclass").hide()

will hide all the elements whose class is myclass. Any jQuery selector can be used.

.hide() as an animation method

Thanks to its options, .hide() can animate the width, height, and opacity of the matched elements simultaneously.

  • Duration can be provided in milliseconds, or using the literals slow (600 ms) and fast(200ms). for example:
$("#myobject").hide(800)
  • A function can be specified to be called once the animation is complete, once per every matched element. This callback is mainly useful for chaining together different animations. For example
$("p").hide( "slow", function() { $(".titles").hide("fast"); alert("No more text!"); });
  • More options exist, please refer to the official website for further details.

.toggle() method

To show / hide elements you can use toggle() method. If element is hidden toggle() will show it and vice versa.
Usage:

$(".myclass").toggle()

.slideDown() method

This method animates the height of the matched elements. This causes lower parts of the page to slide down, making way for the revealed items.
Usage:

$(".myclass").slideDown(); //will expand the element with the identifier myclass for 400 ms. $(".myclass").slideDown(1000); //will expand the element with the identifier myclass for 1000 ms. $(".myclass").slideDown("slow"); //will expand the element with the identifier myclass for 600 ms. $(".myclass").slideDown("fast"); //will expand the element with the identifier myclass for 200 ms.

More Information:

jQuery hide() method on the Official website

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.