creando funciones jQuery para manipular la visibilidad CSS

en jQuery, los métodos .hide () y .show () establecen convenientemente la propiedad de visualización de CSS en ninguno y bloquea respectivamente. Sin embargo, ¿hay una función similar que establezca explícitamente la propiedad de visibilidad CSS en Hidden?

solución

mientras jQuery no proporciona una función nativa específicamente para configurar la visibilidad, puede crear fácilmente su propia.

creando visibilidad personalizada funciones:

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

Ejemplo de uso:

$('#element').visible(); // Makes element visible
$('#element').invisible(); // Makes element invisible
$('#element').visibilityToggle(); // Toggles visibility

sobrecarga de la función national toggle () (no recomendada):

!(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);

Esto le permite usar toggle ('visibilidad') como un atajo para alternar la visibilidad. Sin embargo, esto no se recomienda generalmente, ya que puede anular el comportamiento predeterminado de toggle () en otros contextos.

interactive jsfiddle demostración: [&]