I jQuery er der metoderne .hide()
og .show()
, der indstiller CSS-indstillingen display: none
.
Findes der en tilsvarende funktion, som kan indstille indstillingen visibility: hidden
?
Jeg ved, at jeg kan bruge .css()
, men jeg foretrækker en funktion som .hide()
eller lignende. Tak.
Du kan lave dine egne 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';
});
};
Hvis du ønsker at overbelaste den originale jQuery toggle()
, hvilket jeg ikke anbefaler...
!(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][1].
Der er ikke indbygget en sådan, men du kan nemt skrive din egen:
(function($) {
$.fn.invisible = function() {
return this.each(function() {
$(this).css("visibility", "hidden");
});
};
$.fn.visible = function() {
return this.each(function() {
$(this).css("visibility", "visible");
});
};
}(jQuery));
Du kan så kalde dette på følgende måde:
$("#someElem").invisible();
$("#someOther").visible();
Her er et [arbejdseksempel][1].
Hvis du kun har brug for standardfunktionaliteten for skjul kun med visibility:hidden for at bevare det aktuelle layout, kan du bruge callback-funktionen for skjul til at ændre css-elementet i tagget. Hide docs i jquery
Et eksempel :
$('#subs_selection_box').fadeOut('slow', function() {
$(this).css({"visibility":"hidden"});
$(this).css({"display":"block"});
});
Dette vil bruge den normale cool animation til at skjule div'en, men efter at animationen er færdig, sætter du synligheden til skjult og displayet til blok.
Et eksempel:
Jeg ved godt, at du ikke ville have $("#aa").css() løsningen, men du har ikke angivet, om det var fordi du ved kun at bruge css() metoden mister animationen.