Esta postagem explicará a implementação prática do método fadeOut() do jQuery para a criação de um efeito de fade-out suave.
Como criar efeitos de fade-out suaves usando o método fadeOut() do jQuery?
“ desaparecer() ”O método oculta o elemento selecionado gradualmente, diminuindo sua opacidade. Este método altera o estado do elemento selecionado de visível para oculto. O elemento oculto não aparece na página da web até que o usuário o exiba novamente usando o “ aparecimento gradual() ”Método.
Sintaxe
$ ( seletor ) . desaparecer ( velocidade, facilitação, retorno de chamada ) ;
A sintaxe acima suporta os seguintes parâmetros opcionais para personalizar o efeito de fade-out:
- velocidade: Especifica a velocidade do efeito de desvanecimento em milissegundos. Por padrão seu valor é “400ms”. Além disso, também suporta dois valores integrados “lento” e “rápido”.
- facilitando: Mostra a velocidade do desbotamento da animação em diferentes pontos. Por padrão, seu valor é “swing (mais lento no início/fim e lento no meio)”. Além disso, também funciona no “linear (velocidade constante na animação desbotada)”.
- ligar de volta: Ele define uma função definida pelo usuário que é executada após a conclusão da animação de esmaecimento para executar a tarefa definida.
Vamos usar o método definido acima de forma prática.
Código HTML
Antes de passar para o método “fadeOut()”, observe o seguinte código HTML que cria um elemento “div” de amostra no qual o efeito de fade-out será executado:
< botão > desaparecer ( Esconder Elemento ) botão >< br >< br >< ID da div = 'meuDiv' estilo = 'altura: 80px; largura: 300px; borda: 2px preto sólido; margem: automático; alinhamento de texto: centro' >
< h2 > Bem vindo ao Linuxhint h2 >
divisão >
Nas linhas de código acima:
- O '
”A tag adiciona um elemento de botão. - O ' ”cria um elemento div com um id “myDiv” e é estilizado com a ajuda das seguintes propriedades de estilo (altura, largura, borda, margem, alinhamento de texto).
- Dentro do div, o “ ”Especifica o primeiro elemento de subtítulo do nível 2.
Agora, comece com o primeiro exemplo.
Exemplo 1: Crie efeitos de fade-out suaves com valor padrão fadeOut()
O primeiro exemplo oculta o elemento div correspondente utilizando o método “fadeOut()” com seu valor padrão “400ms”:
< roteiro >
$ ( documento ) . preparar ( função ( ) {
$ ( 'botão' ) . clique ( função ( ) {
$ ( '#meuDiv' ) . desaparecer ( ) ;
} ) ;
} ) ;
roteiro >Nas linhas de código acima:
- Em primeiro lugar, o “ preparar() ”O método executa as funções fornecidas quando o documento HTML/DOM atual é carregado.
- A seguir, o “ clique() ”O método executa a função vinculada ao clicar no botão quando seu seletor de “botão” associado é clicado.
- Depois disso, o “ desaparecer() ”O método oculta o elemento div acessado cujo id é “myDiv” em 400ms, ou seja, valor padrão.
Saída
Observa-se que ao clicar no botão determinado o elemento div desaparece gradativamente em “400ms”.
Exemplo 2: Crie efeitos de fade-out suaves com o parâmetro fadeOut() “speed”
Este exemplo usa o método “fadeOut()” com os valores integrados (lento/rápido) do parâmetro “velocidade”:
< roteiro >
$ ( documento ) . preparar ( função ( ) {
$ ( 'botão' ) . clique ( função ( ) {
$ ( '#meuDiv' ) . desaparecer ( 'lento' ) ;
} ) ;
} ) ;
roteiro >Agora o ' desaparecer() ”O método passa o“ lento ”Valor como parâmetro para criar suavemente o efeito de esmaecimento, ou seja, altera o estado do elemento div selecionado de visível para oculto.
Saída
Pode-se observar que o elemento div selecionado se esconde lentamente ao clicar no botão.
Exemplo 3: Crie efeitos de fade-out suaves com o parâmetro fadeOut() “duration”
Este exemplo aplica o método “fadeOut()” com um número específico de milissegundos como parâmetro de duração:
< roteiro >
$ ( documento ) . preparar ( função ( ) {
$ ( 'botão' ) . clique ( função ( ) {
$ ( '#meuDiv' ) . desaparecer ( 6.000 ) ;
} ) ;
} ) ;
roteiro >Agora, o método “fadeOut()” usa o número especificado de milissegundos para ocultar o elemento correspondente em um determinado período de tempo.
Saída
A saída acima oculta as alterações do elemento div fornecido ao clicar em um botão em um determinado intervalo de tempo.
Exemplo 4: Crie efeitos de fade-out suaves com a função fadeOut() “callback”
Este exemplo executa uma função de retorno de chamada após a conclusão do efeito fade-out por meio do método “fadeOut()”:
< roteiro >
$ ( documento ) . preparar ( função ( ) {
$ ( 'botão' ) . clique ( função ( ) {
$ ( '#meuDiv' ) . desaparecer ( 4000 , função ( ) {
console. registro ( 'Dado elemento div foi ocultado com sucesso!' )
} ) ;
} ) ;
} ) ;
roteiro >No bloco de código indicado:
- O ' desaparecer() ”O método faz desaparecer o elemento div correspondente em um número específico de milissegundos e, em seguida, executa a função de “retorno de chamada” fornecida.
- Dentro de ' ligar de volta ”Função, o“ console.log() ”É aplicado para exibir a instrução especificada após a conclusão do efeito de “fade-out”.
Saída
Vê-se que o “console” mostra uma instrução definida na função de retorno de chamada após ocultar o elemento div fornecido.
Exemplo 5: Crie efeitos de fade-out suaves com o parâmetro fadeOut() “easing”
Este exemplo aplica o método “fadeOut()” com os possíveis valores do parâmetro “easing”:
< roteiro >
$ ( documento ) . preparar ( função ( ) {
$ ( 'botão' ) . clique ( função ( ) {
$ ( '#meuDiv' ) . desaparecer ( 4000 , 'linear' ) ;
} ) ;
} ) ;
roteiro >Agora o ' desaparecer() ”O método executa o efeito de fade out em um número específico de milissegundos a uma velocidade constante por causa do“ linear ' valor.
Saída
A saída altera o estado do elemento fornecido de visível para oculto a uma velocidade constante. É isso para implementar o efeito “fade-out” no elemento.
Conclusão
Para criar um efeito de fade-out suave usando o “ desaparecer() ”Método, o usuário não requer nenhum parâmetro adicional. Este método desaparece, ou seja, oculta o elemento gradualmente, alterando sua opacidade. Se o usuário precisar realizar um efeito de fade-out em um número específico de milissegundos, execute uma função de retorno de chamada e use os parâmetros “speed”, “easing” e “callback” com o método “fadeOut()”. Este post explicou praticamente o método fadeOut() do jQuery para a criação de um efeito de fade-out suave.