Element Visibility in jQuery
Toggle possibilities
Simple toggle()
case
function toggleBasic() {
$(".target1").toggle();
}
With specific duration****
function toggleDuration() {
$(".target2").toggle("slow"); // A millisecond duration value is also acceptable
}
...and callback****
function toggleCallback() {
$(".target3").toggle("slow", function () {
alert("now do something");
});
}
...or with easing and callback.
function toggleEasingAndCallback() {
// You may use jQueryUI as the core only supports linear and swing easings
$(".target4").toggle("slow", "linear", function () {
alert("now do something");
});
}
...or with a variety of options.
function toggleWithOptions() {
$(".target5").toggle({
// See all possible options in: api.jquery.com/toggle/#toggle-options
duration: 1000, // milliseconds
easing: "linear",
done: function () {
alert("now do something");
},
});
}
It's also possible to use a slide as animation with slideToggle()
function toggleSlide() {
$(".target6").slideToggle(); // Animates from top to bottom, instead of top corner
}
...or fade in/out by changing opacity with fadeToggle()
function toggleFading() {
$(".target7").fadeToggle("slow");
}
...or toggle a class with toggleClass()
function toggleClass() {
$(".target8").toggleClass("active");
}
A common case is to use toggle()
in order to show one element while hiding the other (same class)
function toggleX() {
$(".targetX").toggle("slow");
}
All the above examples can be found here
Overview
$(element).hide(); // sets display: none
$(element).show(); // sets display to original value
$(element).toggle(); // toggles between the two
$(element).is(":visible"); // returns true or false
$("element:visible"); // matches all elements that are visible
$("element:hidden"); // matches all elements that are hidden
$("element").fadeIn(); // display the element
$("element").fadeOut(); // hide the element
$("element").fadeIn(1000); // display the element using timer
$("element").fadeOut(1000); // hide the element using timer
// display the element using timer and a callback function
$("element").fadeIn(1000, function () {
// code to execute
});
// hide the element using timer and a callback function
$("element").fadeOut(1000, function () {
// code to execute
});
Parameters
Parameter | Details |
---|---|
Duration | When passed, the effects of .hide() , .show() and .toggle() are animated; the element(s) will gradually fade in or out. |