Diferença entre o .hide () do jQuery e a configuração do CSS para exibição: none

153

O que eu estou melhor fazendo? .hide()é mais rápido do que escrever .css("display", "none"), mas qual é a diferença e o que os dois estão realmente fazendo no elemento HTML?

benhowdle89
fonte

Respostas:

208

Na página jQuery sobre .hide () :

"Os elementos correspondentes serão ocultados imediatamente, sem animação. Isso é aproximadamente equivalente a chamar .css ('display', 'none'), exceto que o valor da propriedade display é salvo no cache de dados do jQuery, para que o display possa posteriormente restaurado ao seu valor inicial. Se um elemento tiver um valor de exibição inline, ele será oculto e mostrado, mais uma vez será exibido inline. "

Portanto, se é importante que você possa reverter para o valor anterior de display, é melhor usá-lo, hide()pois dessa forma o estado anterior é lembrado. Além disso, não há diferença.

Stephan Muller
fonte
O problema usando .hide é após o local recarregar o elemento esconder ainda olhando em 2 segundos
TM
34

.hide()armazena a propriedade anterior display pouco antes de configurá-la none, portanto, se não fosse a displaypropriedade padrão para o elemento com o qual você é um pouco mais seguro, .show()usará essa propriedade armazenada como o que retornar. Então ... ele faz algum trabalho extra, mas a menos que você está fazendo toneladas de elementos, a diferença de velocidade deve ser insignificante.

Nick Craver
fonte
13

Observando o código do jQuery, é o que acontece:

hide: function( speed, easing, callback ) {
    if ( speed || speed === 0 ) {
        return this.animate( genFx("hide", 3), speed, easing, callback);

    } else {
        for ( var i = 0, j = this.length; i < j; i++ ) {
            var display = jQuery.css( this[i], "display" );

            if ( display !== "none" ) {
                jQuery.data( this[i], "olddisplay", display );
            }
        }

        // Set the display of the elements in a second loop
        // to avoid the constant reflow
        for ( i = 0; i < j; i++ ) {
            this[i].style.display = "none";
        }

        return this;
    }
},
Normando Espinhoso
fonte
12

Eles são a mesma coisa. .hide()chama uma função jQuery e permite adicionar uma função de retorno de chamada a ela. Assim, .hide()você pode adicionar uma animação, por exemplo.

.css("display","none")altera o atributo do elemento para display:none. É o mesmo que se você fizesse o seguinte em JavaScript:

document.getElementById('elementId').style.display = 'none';

A .hide()função, obviamente, leva mais tempo para ser executado como ele verifica para funções de retorno de chamada, velocidade, etc ...

semente
fonte
4

Para usar ambos é uma boa resposta; não é uma questão de um ou outro.

A vantagem de usar ambos é que o CSS oculta o elemento imediatamente quando a página é carregada. O jQuery .hide piscará o elemento por um quarto de segundo e depois o ocultará.

No caso em que queremos que o elemento não seja mostrado quando a página é carregada, podemos usar CSS e definir display: none e usar o jQuery .hide (). Se planejamos alternar o elemento, podemos usar a alternância do jQuery.

Catto
fonte
1

Ambos fazem o mesmo em todos os navegadores, AFAIK. Verificado no Chrome e Firefox, ambos anexam display:noneao styleatributo do elemento.

Klemen Slavič
fonte
-5

Veja que não há diferença se você usar o método oculto básico. Mas o jquery fornece vários métodos de ocultação que dão efeitos ao elemento. Consulte o link abaixo para obter uma explicação detalhada: Efeitos para Ocultar no Jquery

nilesh panchal
fonte