Equivalent van jQuery .hide() om zichtbaarheid in te stellen: verborgen

In jQuery zijn er .hide()en .show()methoden die de CSS display: noneinstelling instellen.

Is er een equivalente functie die de instelling visibility: hiddenzou instellen?

Ik weet dat ik .css()kan gebruiken, maar ik heb liever een functie zoals .hide()of zo. Bedankt.

Antwoord 1, autoriteit 100%

Je zou je eigen plug-ins kunnen maken.

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

Als je de originele jQuery toggle()wilt overbelasten, wat ik niet aanraad…

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

Antwoord 2, autoriteit 25%

Er is er geen ingebouwd, maar u kunt er vrij gemakkelijk zelf een schrijven:

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

Je kunt dit dan zo noemen:

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

Hier is een werkvoorbeeld.

Antwoord 3, autoriteit 13%

Een nog eenvoudigere manier om dit te doen, is door de toggleClass()-methode

van jQuery te gebruiken.

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

Antwoord 4, autoriteit 6%

Als je alleen de standaardfunctionaliteit van hide only with visibility:hidden nodig hebt om de huidige lay-out te behouden, kun je de callback-functie van hide gebruiken om de css in de tag te wijzigen. Documenten verbergen in jQuery

Een voorbeeld:

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

Hiermee wordt de normale coole animatie gebruikt om de div te verbergen, maar nadat de animatie is voltooid, stelt u de zichtbaarheid in op verborgen en weergave op blokkering.

Een voorbeeld: http://jsfiddle.net/bTkKG/1/

Ik weet dat je de $(“#aa”).css()-oplossing niet wilde, maar je hebt niet aangegeven of dit het geval was omdat je de animatie verliest door alleen de css()-methode te gebruiken.

Antwoord 5

Pure JSequivalent voor 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

We gebruiken return elom te voldoen aan de vloeiende interface“ontwerppatroon”.

Hier is werkvoorbeeld.

Hieronder geef ik ook HOOGSTE niet aanbevolenalternatief, dat echter waarschijnlijk meer “dicht bij de vraag” is:

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

natuurlijk implementeert dit niet jQuery ‘each’ (gegeven in @JamesAllardiceantwoord) omdat we hier pure js gebruiken.

Een werkvoorbeeld is hier.

Antwoord 6

Hier is één implementatie, wat werkt als de functie $.prop(name[,value])of $.attr(name[,value]). Als de variabele bis gevuld, wordt de zichtbaarheid op basis daarvan ingesteld en wordt thisgeretourneerd (waardoor het mogelijk wordt door te gaan met andere eigenschappen), anders wordt de zichtbaarheidswaarde geretourneerd.

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

Voorbeeld:

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