1.9 KiB
1.9 KiB
| 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