Entspricht jQuery .hide (), um die Sichtbarkeit festzulegen: versteckt

In jQuery gibt es .hide()und .show()Methoden , die die CSS setzt display: noneEinstellung.

Gibt es eine äquivalente Funktion, die die visibility: hiddenEinstellung festlegen würde ?

Ich weiß, dass ich verwenden kann, .css()aber ich bevorzuge eine Funktion wie .hide()oder so. Vielen Dank.

Sie könnten Ihre eigenen Plugins erstellen.

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

Wenn Sie die ursprüngliche jQuery überladen möchten toggle(), was ich nicht empfehle ...

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

Es gibt keine eingebaute, aber Sie können ganz einfach Ihre eigene schreiben:

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

Sie können dies dann so nennen:

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

Hier ist ein Arbeitsbeispiel .

Eine noch einfachere Möglichkeit, dies zu tun, ist die Verwendung von jQuery's toggleClass () -Methode von

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

Wenn Sie nur die Standardfunktionalität von Ausblenden nur mit Sichtbarkeit benötigen: Ausgeblendet, um das aktuelle Layout beizubehalten, können Sie die Rückruffunktion von Ausblenden verwenden, um das CSS im Tag zu ändern. Dokumente in jquery ausblenden

Ein Beispiel :

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

Dies verwendet die normale coole Animation, um das Div auszublenden, aber nach Abschluss der Animation setzen Sie die Sichtbarkeit auf ausgeblendet und die Anzeige auf Blockieren.

Ein Beispiel : http://jsfiddle.net/bTkKG/1/

Ich weiß, dass Sie die Lösung $ ("# aa"). Css () nicht wollten, aber Sie haben nicht angegeben, ob dies daran liegt, dass Sie die Animation verlieren, wenn Sie nur die Methode css () verwenden.

Hier ist eine Implementierung, wie sie funktioniert $.prop(name[,value])oder $.attr(name[,value])funktioniert. Wenn die bVariable gefüllt ist, wird die Sichtbarkeit entsprechend festgelegt und thiszurückgegeben (um mit anderen Eigenschaften fortzufahren), andernfalls wird der Sichtbarkeitswert zurückgegeben.

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

Beispiel:

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

Reines JS- Äquivalent für 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

Wir verwenden return elaufgrund der fließenden Schnittstelle "Designmuster".

Hier ist ein Arbeitsbeispiel .

Im Folgenden biete ich auch eine sehr nicht empfohlene Alternative an, die jedoch wahrscheinlich eher "nah an der Frage" ist:

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

Natürlich implementiert dies nicht jQuery 'each' (angegeben in @JamesAllardice Antwort von ), da wir hier reine js verwenden.

Arbeitsbeispiel ist hier .