Équivalent de jQuery .hide () pour définir la visibilité: caché

Dans jQuery, il existe des méthodes .hide()et .show()qui définissent le display: noneparamètre CSS .

Existe-t-il une fonction équivalente qui définirait le visibility: hiddenparamètre?

Je sais que je peux utiliser, .css()mais je préfère une fonction similaire .hide(). Merci.

Vous pouvez créer vos propres plugins.

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 vous voulez surcharger le jQuery d'origine toggle(), ce que je ne recommande pas ...

!(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 .

Il n'y en a pas de intégré, mais vous pouvez écrire le vôtre assez facilement:

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

Vous pouvez alors appeler cela comme ceci:

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

Voici un exemple de travail .

Une façon encore plus simple de le faire est d'utiliser la méthode 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");
    });
});

Si vous n'avez besoin que de la fonctionnalité standard de masquer uniquement avec visibilité: masqué pour conserver la disposition actuelle, vous pouvez utiliser la fonction de rappel de masquer pour modifier le CSS dans la balise. Masquer les documents dans jquery

Un exemple :

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

Cela utilisera l'animation cool normale pour masquer le div, mais après la fin de l'animation, vous définissez la visibilité sur caché et l'affichage sur bloquer.

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

Je sais que vous ne vouliez pas de la solution $ ("# aa"). Css (), mais vous n'avez pas spécifié si c'était parce qu'en utilisant uniquement la méthode css () vous perdiez l'animation.

Voici une implémentation, ce qui fonctionne $.prop(name[,value])ou $.attr(name[,value])fonctionne. Si la bvariable est remplie, la visibilité est définie en fonction de cela et thisest renvoyée (permettant de continuer avec d'autres propriétés), sinon elle renvoie une valeur de visibilité.

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

Exemple:

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

Équivalent JS pur pour 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

Nous utilisons en return elraison de satisfaire l' interface fluide "desing pattern".

Voici un exemple de travail .

Ci-dessous, je propose également une alternative HAUTEMENT déconseillée , qui est cependant probablement une réponse plus "proche de la question":

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

bien sûr, cela n'implémente pas jQuery 'each' (donné dans la réponse @JamesAllardice ) car nous utilisons ici des js purs.

Un exemple de travail est ici .