Equivalente de jQuery .hide() para establecer la visibilidad: oculto

Resuelto Tomas asked hace 12 años • 6 respuestas

En jQuery, existen .hide()métodos .show()que establecen la display: noneconfiguración de CSS.

¿Existe una función equivalente que establezca la visibility: hiddenconfiguración?

Sé que puedo usarlo, .css()pero prefiero alguna función similar .hide(). Gracias.

Tomas avatar Mar 08 '12 15:03 Tomas
Aceptado

Podrías crear tus propios complementos.

jQuery.fn.visible = function() {
    return this.css('visibility', 'visible');
};

jQuery.fn.invisible = function() {
    return this.css('visibility', 'hidden');
};

jQuery.fn.visibilityToggle = function() {
    return this.css('visibility', function(i, visibility) {
        return (visibility == 'visible') ? 'hidden' : 'visible';
    });
};

Si desea sobrecargar el jQuery original toggle(), que no recomiendo...

!(function($) {
    var toggle = $.fn.toggle;
    $.fn.toggle = function() {
        var args = $.makeArray(arguments),
            lastArg = args.pop();

        if (lastArg == 'visibility') {
            return this.visibilityToggle();
        }

        return toggle.apply(this, arguments);
    };
})(jQuery);

jsFiddle .

alex avatar Mar 08 '2012 08:03 alex

No hay ninguno integrado, pero puedes escribir el tuyo propio con bastante facilidad:

(function($) {
    $.fn.invisible = function() {
        return this.each(function() {
            $(this).css("visibility", "hidden");
        });
    };
    $.fn.visible = function() {
        return this.each(function() {
            $(this).css("visibility", "visible");
        });
    };
}(jQuery));

Luego puedes llamar a esto así:

$("#someElem").invisible();
$("#someOther").visible();

A continuación se muestra un ejemplo práctico .

James Allardice avatar Mar 08 '2012 08:03 James Allardice

Una forma aún más sencilla de hacer esto es utilizar el método toggleClass() de jQuery.

CSS

.newClass{visibility: hidden}

HTML

<a href="#" class=trigger>Trigger Element </a>
<div class="hidden_element">Some Content</div>

js

$(document).ready(function(){
    $(".trigger").click(function(){
        $(".hidden_element").toggleClass("newClass");
    });
});
Chaya Cooper avatar Jan 31 '2013 18:01 Chaya Cooper

Si solo necesita la funcionalidad estándar de ocultar solo con visibilidad: oculta para mantener el diseño actual, puede usar la función de devolución de llamada de ocultar para modificar el CSS en la etiqueta. Ocultar documentos en jquery

Un ejemplo :

$('#subs_selection_box').fadeOut('slow', function() {
      $(this).css({"visibility":"hidden"});
      $(this).css({"display":"block"});
});

Esto utilizará la animación genial normal para ocultar el div, pero una vez finalizada la animación, configura la visibilidad como oculta y la visualización como bloqueada.

Un ejemplo: http://jsfiddle.net/bTkKG/1/

Sé que no querías la solución $("#aa").css(), pero no especificaste si era porque al usar solo el método css() se pierde la animación.

h3ct0r avatar Oct 27 '2012 20:10 h3ct0r