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




toggle jquery (4)

Equivalente a 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 el debido para satisfacer la interfaz fluida "diseño de diseño".

Aquí está el ejemplo de trabajo .

A continuación, también ofrezco una alternativa ALTAMENTE no recomendada , que sin embargo es probablemente una respuesta "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 de @JamesAllardice ) porque usamos js puros aquí.

El ejemplo de trabajo está here .

En jQuery, hay .hide() y .show() que establecen la display: none CSS display: none configuración.

¿Hay una función equivalente que establezca la visibility: hidden configuración visibility: hidden ?

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


No hay uno incorporado, pero puedes escribir el tuyo 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));

A continuación, puede llamar a esto como así:

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

Aquí hay un ejemplo de trabajo .


Si solo necesita la funcionalidad estándar de hide solo con visibilidad: oculto para mantener el diseño actual, puede usar la función de devolución de llamada 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 fresca normal para ocultar el div, pero una vez que finalice la animación, configurará la visibilidad como oculta y la pantalla se bloqueará.

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

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


Una forma aún más sencilla de hacer esto es usar el método jqueryui.com/toggleClass jQuery's

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");
    });
});




visibility