jQuery
Visibilidad de los elementos
Buscar..
Parámetros
Parámetro | Detalles |
---|---|
Duración | Cuando se pasan, los efectos de .hide() , .show() y .toggle() se animan; el elemento (s) se desvanecerá gradualmente dentro o fuera. |
Visión general
$(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
});
Posibilidades de alternar
Caso simple toggle()
function toggleBasic() {
$(".target1").toggle();
}
Con duración específica
function toggleDuration() {
$(".target2").toggle("slow"); // A millisecond duration value is also acceptable
}
... y devolución de llamada
function toggleCallback() {
$(".target3").toggle("slow",function(){alert('now do something');});
}
... o con flexibilización y devolución de llamada.
function toggleEasingAndCallback() {
// You may use jQueryUI as the core only supports linear and swing easings
$(".target4").toggle("slow","linear",function(){alert('now do something');});
}
... o con una variedad de opciones .
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');
}
}
);
}
También es posible usar una diapositiva como animación con slideToggle()
function toggleSlide() {
$(".target6").slideToggle(); // Animates from top to bottom, instead of top corner
}
... o desvanecerse / desaparecer cambiando la opacidad con fadeToggle()
function toggleFading() {
$( ".target7" ).fadeToggle("slow")
}
... o alternar una clase con toggleClass()
function toggleClass() {
$(".target8").toggleClass('active');
}
Un caso común es usar toggle()
para mostrar un elemento mientras se oculta el otro (la misma clase)
function toggleX() {
$(".targetX").toggle("slow");
}
Todos los ejemplos anteriores se pueden encontrar aquí
Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow