Método fadeIn

O método fadeIn exibe suavemente elementos ocultos, tornando-os opacos. Os elementos podem ser ocultados usando o método fadeOut, tornando-os transparentes.

Sintaxe

Exibição em um tempo determinado, 400ms por padrão:

javascript.fadeIn(duração);

O tempo pode ser definido não apenas em milissegundos, mas também com as palavras-chave slow (600ms) e fast (200ms), quanto maior o valor, mais lenta a animação:

javascript.fadeIn('slow' ou 'fast');

Se nenhum parâmetro for especificado - não haverá animaçãо, os elementos serão exibidos instantaneamente:

javascript.fadeIn();

Você também pode passar uma função de easing como segundo parâmetro, e uma função de callback como terceiro - será executada após a conclusão da animação. Ambos os parâmetros são opcionais:

javascript.fadeIn(duração, [função de easing], [função de callback]);

Você pode passar várias opções para o método, na forma de um objeto JavaScript, contendo pares chave: valor:

javascript.fadeIn(opções);

Tal objeto pode passar os seguintes parâmetros e funções - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. A descrição desses parâmetros você pode ver para o método animate. Por exemplo, vamos definir a duração e a função de easing:

javascript.fadeIn( {duration: 800, easing: easeInSine} );

Exemplo

No próximo exemplo, ao clicar no botão #hide o elemento com #test será ocultado usando o método fadeOut, e ao clicar no botão #show - será exibido, com o método fadeIn. Também definiremos a velocidade para 1000ms:

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000);
});

Exemplo

E no próximo exemplo, após o término da animação ao exibir o elemento #test, nós exibiremos uma mensagem com o texto '!', e ao ocultar com o texto '?':

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Veja também