Métodos de desbotamento do jQuery explicados

Desbotamento é a propriedade que permite manipular a opacidade (transparência) dos elementos HTML. JQuery oferece quatro métodos de desbotamento que permitem alterar a transparência dos elementos. Esses métodos incluem Fadein (), Fadeout (), Fadetoggle () e Fadeto ().

Este artigo explora os métodos de desbotamento no jQuery e serve os seguintes resultados de aprendizagem.

• Trabalho de métodos de desbotamento do jQuery
• Usando métodos de desbotamento do jQuery

Como usar métodos de desbotamento do jQuery

Como discutido anteriormente, o jQuery tem quatro métodos de desbotamento e uma visão profunda de todos esses métodos é fornecida aqui.

Como usar o método Fadein ()

O método Fadein () exibe o elemento aumentando a opacidade. A sintaxe deste método é fornecida abaixo:

$ (seletor).fadein (velocidade, retorno de chamada);

A sintaxe tem as seguintes instâncias

• Seletor pode ser qualquer elemento ou pode se referir à classe ou ID de qualquer elemento.
• velocidade pode ser especificado em um dos quatro valores: lento, médio, rápido e milissegundos.
• ligar de volta é o parâmetro opcional e é exercido após a execução da função.

Exemplo

O código fornecido abaixo mostra o uso do método jQuery fadeout ().

jQuery

$ (documento).pronto (function ()
$ (".aparecimento gradual").clique (function ()
$ (".lento").fadein ("lento");
$ (".rápido").fadein ("rápido");
$ (".mili ").Fadein (2000);
);
);

O código é descrito como,

• .aparecimento gradual refere-se à aula de botão e, ao clicar no botão, ele desaparecerá nos parágrafos
• o .lento, .rápido e .mili As aulas se referem a três parágrafos que serão desbotados em várias velocidades

Observação: A propriedade de exibição do elemento (que você vai desaparecer) deve ser definido como nenhum.

Saída

Como estamos desaparecendo e a propriedade de exibição dos parágrafos está definida como nenhum. Assim, os parágrafos estarão escondidos na execução da página.

Depois de clicar no botão, você observará que os parágrafos aparecerão dependendo da velocidade, como mostrado na imagem abaixo.

Como usar o método Fadeout ()

O método Fadeout () desaparece o elemento exibido, diminuindo a opacidade do elemento. A sintaxe deste método é fornecida abaixo:

$ (seletor).Fadeout (velocidade, retorno de chamada);

Exemplo

O código escrito abaixo mostra o uso do método jQuery fadeout ().

O código acima é descrito como,

• .desaparecer A classe de botão é usada que desaparecerá os parágrafos
• o .lento, .rápido e .mili são os nomes das classes definidos para parágrafos e serão usados ​​para desbastar e também para estilo

Saída

No método Fadeout (), os parágrafos serão exibidos como mostrado abaixo.

Depois de clicar no botão, os parágrafos desaparecerão.

Como usar o método fadeto ()

O método Fadeto () funciona sobre os princípios do método Fadeout (). No entanto, Fadeto () desaparece o elemento usando um intervalo numérico (0-1). Esse intervalo de opacidade define o nível de opacidade do elemento, maior o número maior será a opacidade e vice -versa. A sintaxe é fornecida abaixo:

$ (seletor).Fadeto (velocidade, opacidade, retorno de chamada);

O parâmetro de opacidade aceita 0 a 1 valor.

Exemplo

O código fornecido abaixo pratica o método Fadeto ().

O código é descrito como,

• .Fadeto refere -se à aula de botão
• o #min, #avg e #max Representa os IDs de três tags div, e esses IDs se referem aos valores que serão usados ​​para o método Fadeto ()
• O valor de desbotamento varia de 0 a 1 nos métodos Fadeto ()

Saída

Antes de aplicar o método Fadeto ()

Depois de aplicar o método Fadeto ()

Na saída acima, observa -se que o parágrafo com valor 0 foi lavado.

Como usar o método fadetoggle ()

O método Fadetoggle () fica entre os métodos Fadein () e Fadeout (). Ao usar o Fadetoggle (), você pode exibir um elemento oculto e ocultar um elemento exibido. A sintaxe deste método é:

$ (seletor).Fadeto (velocidade, retorno de chamada);

Exemplo

O código fornecido abaixo funções para usar o método fadetoggle ().

• .Fadetoggle aula refere -se ao botão
• o #lento, #fast e #mili representa vários id de div

Saída

Antes de clicar no botão

Depois de clicar no botão,

Conclui -se que, se o elemento for exibido, ele será oculto após o método Fadetoggle () (como o método Fadeout ()). Da mesma forma, se o elemento estiver no estado de Fadeout (), então o Fadetoggle () atuará como um método fadein ().

Conclusão

O jQuery fornece vários métodos de desbotamento que incluem Fadein (), Fadeout (), Fadetoggle () e Fadeto () que auxiliam no desbotamento de elementos HTML. Este guia fornece o trabalho e o uso de cada método de desbotamento do jQuery. O método Fadein () exibe o elemento se estiver oculto, enquanto o Fadeout () oculta o elemento. O método fadeto () desaparece ou sai, dependendo do número de opacidade. Por fim, o método Fadetoggle () funciona entre os métodos Fadein () e Fadeout ().