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

340

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

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

Sé que puedo usar, .css()pero prefiero alguna función como .hide()o así. Gracias.

TMS
fuente
2
Puede implementar el suyo basado en.toggle()
zerkms
También soy fanático del método toggleClass () de jQuery para esto :) jqueryui.com/toggleClass Siéntase libre de consultar el ejemplo que compartí en mi respuesta a continuación stackoverflow.com/a/14632687/1056713
Chaya Cooper

Respuestas:

426

Podrías hacer 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
fuente
@Tomas Tendrías que sombrear lo toggle()que podría romper otros scripts. Si lo desea, puede agregar un argumento adicional toggle()para especificar si debe visibilityo displayno activarse. Sin embargo, solo usaría el personalizado en mi último ejemplo. :)
alex
¿Podría publicar un ejemplo sobre cómo admitir parámetros adicionales de show(velocidad, flexibilización, devolución de llamada)?
georg
11
Es superfluo si lo miras de esa manera, pero hay un propósito. Si esto se concatena con otro script con un (function() { })()o similar, ASI no se activará porque parece una invocación de función. Prueba esto , luego quita el !.
alex
1
@NoBugs Inserción automática de punto y coma. Escribí una publicación de blog al respecto aquí.
alex
1
@VishalSakaria No es realmente un término bien definido hasta donde yo sé, por lo que debería estar bien usarlo aquí.
alex
103

No hay uno incorporado, pero podría escribir el suyo 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 puede llamar a esto así:

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

Aquí hay un ejemplo de trabajo .

James Allardice
fuente
1
Buen punto, solo una fuerza de hábito. Gracias. ¡+1 a la respuesta de alex!
James Allardice
Por curiosidad, ¿qué sentido tiene envolver estas dos funciones en el (function($) {...}(jQuery));contenedor? Nunca antes había definido mis propias funciones en jQuery, siempre he definido funciones en JavaScript directo.
VoidKing
2
@VoidKing: es solo la "mejor práctica" para los complementos de jQuery según los documentos. Le permite usar el $identificador dentro de la función, incluso si se refiere a algo más en el ámbito primario.
James Allardice
jQuery en realidad tiene un método incorporado toggleClass () para esto :) jqueryui.com/toggleClass Siéntase libre de consultar el ejemplo que compartí en mi respuesta a continuación stackoverflow.com/a/14632687/1056713
Chaya Cooper
55

Una forma aún más simple de hacer esto es usar 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
fuente
1
Me gusta este enfoque. Es menos autónomo porque requiere una hoja de estilo separada, pero ayuda a mantener toda la información de estilo en las hojas de estilo, que es donde debe pertenecer. Si desea deshabilitar la visibilidad, puede cambiar una etiqueta css en un lugar en lugar de cambiar todo su código js.
vaughan
19
Para aquellos que usan bootstrap, esta clase se llama invisible.
user239558
25

Si solo necesita la funcionalidad estándar de hide solo con visibilidad: oculta para mantener el diseño actual, puede usar la función de devolución de llamada de hide para alterar 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 usará la animación genial normal para ocultar el div, pero después de que termine la animación, configura la visibilidad como oculta y la pantalla para bloquear.

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

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

h3ct0r
fuente
2

Aquí hay una implementación, lo que funciona $.prop(name[,value])o $.attr(name[,value])funciona. Si bse llena la variable, la visibilidad se establece de acuerdo con eso y thisse devuelve (permitiendo continuar con otras propiedades), de lo contrario, devuelve el valor de visibilidad.

jQuery.fn.visible = function (b) {
    if(b === undefined)
        return this.css('visibility')=="visible";
    else {
        this.css('visibility', b? 'visible' : 'hidden');
        return this;
    }
}

Ejemplo:

$("#result").visible(true).on('click',someFunction);
if($("#result").visible())
    do_something;
Teet Kalm
fuente
1

Equivalente JS puro para jQuery hide () / show ():

function hide(el) {
    el.style.visibility = 'hidden';    
    return el;
}

function show(el) {
    el.style.visibility = 'visible';    
    return el;
}

hide(document.querySelector(".test"));
// hide($('.test')[0])   // usage with jQuery

Usamos return eldebido a la interfaz fluida "patrón de diseño".

Aquí está el ejemplo de trabajo .


A continuación, también proporciono una alternativa ALTAMENTE no recomendada , que probablemente sea una respuesta más "cercana a la pregunta":

HTMLElement.prototype.hide = function() {
    this.style.visibility = 'hidden';  
    return this;
}

HTMLElement.prototype.show = function() {
    this.style.visibility = 'visible';  
    return this;
}

document.querySelector(".test1").hide();
// $('.test1')[0].hide();   // usage with jQuery

por supuesto, esto no implementa jQuery 'each' (dado en la respuesta @JamesAllardice ) porque usamos js puros aquí.

El ejemplo de trabajo está aquí .

Kamil Kiełczewski
fuente