Equivalente di jQuery .hide() per impostare la visibilità: nascosta

Question

In jQuery, ci sono i metodi .hide() e .show() che imposta l'impostazione CSS display: none.

Esiste una funzione equivalente che imposta l'impostazione visibility: hidden?

So che posso usare .css() ma preferisco alcune funzioni come .hide() o così. Grazie.

Answer 1

È possibile creare i propri plugin.

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

Se si vuole sovraccaricare l'originale jQuery toggle(), che io non consiglio ...

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

Answer 2

Non c'è una sola incorporata, ma si potrebbe scrivere il proprio abbastanza facilmente:

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

È quindi possibile chiamare questo modo:

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

Ecco un working example.

Answer 3

Se è necessaria solo la funzionalità standard di nascondere solo con visibilità: nascosto per mantenere il layout corrente è possibile utilizzare la funzione di richiamata di hide per modificare il css nel tag. Hide docs in jquery

Un esempio:

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

Questa utilizzerà l'animazione freddo normale per nascondere il div, ma dopo l'arrivo di animazione si impostare la visibilità di nascosto e visualizzare bloccare.

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

So che non ordinavi i $ ("# AA") css() soluzione, ma non è stato specificato se fosse perché usando solo il css() il metodo si perde la animazione.

Answer 4

Un modo ancora più semplice per farlo è quello di utilizzare toggleClass() il metodo di 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"); 
    }); 
});