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:
.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:
.fadeIn('slow' ou 'fast');
Se nenhum parâmetro for especificado - não haverá animaçãо, os elementos serão exibidos instantaneamente:
.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:
.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:
.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:
.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:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#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 '?':
<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
