Método jQuery - fadeOut (speed, [callback])
Descrição
o fadeOut( ) O método esmaece todos os elementos correspondentes ajustando sua opacidade para 0 e, em seguida, definindo a exibição como "nenhum" e disparando um retorno de chamada opcional após a conclusão.
Sintaxe
Aqui está a sintaxe simples para usar este método -
selector.fadeOut( speed, [callback] );
Parâmetros
Aqui está a descrição de todos os parâmetros usados por este método -
speed - Uma string que representa uma das três velocidades predefinidas ("lento", "def" ou "rápido") ou o número de milissegundos para executar a animação (por exemplo, 1000).
callback - Este é um parâmetro opcional que representa uma função a ser chamada assim que a animação for concluída.
Exemplo
A seguir está um exemplo simples mostrando o uso desse método -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#in").click(function(){
$(".target").fadeIn( 'slow', function(){
$(".log").text('Fade In Transition Complete');
});
});
$("#out").click(function(){
$(".target").fadeOut( 'slow', function(){
$(".log").text('Fade Out Transition Complete');
});
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id = "out"> Fade Out </button>
<button id = "in"> Fade In</button>
<div class = "target">
<img src = "../images/jquery.jpg" alt = "jQuery" />
</div>
<div class = "log"></div>
</body>
</html>
Isso produzirá o seguinte resultado -
jquery-effects.htm