Efeitos do jQuery | Explicado

O jQuery (se você ainda não está familiarizado com ele) é uma biblioteca JavaScript que contém funcionalidades comumente usadas de uma página da web envolvida em diferentes funções. Fornecendo assim uma interface de economia de tempo para o desenvolvedor da web. O JQuery também fornece uma interface que economiza tempo para criar animações e efeitos de transição com quase nenhuma configuração (a maioria das funções recebe 2 argumentos no máximo). JQuery contém vários tipos de funções, incluindo seletores, eventos e efeitos. Neste post, vamos discutir vários tipos de efeitos que são fornecidos por jQuery, sua sintaxe junto com o exemplo deles

Configurando HTML e incluindo jQuery

Para começar a usar o jQuery em seu projeto, você precisa incluí -lo dentro da tag de script, estamos usando o JQuery hospedado no Google com a seguinte linha:

Depois que esta linha foi adicionada ao arquivo html, podemos começar a escrever o código jQuery

O método Animate ()

O método animado oferecido pelo jQuery é usado para criar animação muito básica, mas ainda atraente em sua página da web. Esta função leva três argumentos:

• Um parâmetro necessário que é o animação
• A velocidade (opcional) parâmetro que define a velocidade da animação
• A ligar de volta(parâmetro opcional) que, como o nome indica, é a função de retorno de chamada

Sintaxe do método Animate ()

A sintaxe é bastante direta, como já explicado acima

[jQuerry_selector $ ()].animate (parâmetro, animação_speed, callback_function);

Para demonstrar isso, vamos criar um botão e uma div em nosso arquivo HTML usando as seguintes linhas:

Olá! Eu sou LinuxBot
Clique em mim!

Isso nos dará o seguinte resultado em seu navegador:

Para o código jQuery, vamos girar a opacidade do div até 0.7 Mas vamos fazer isso em 2 segundos usando as seguintes linhas de código:

$ ("botão").clique (function ()
$ ("div: last").animar(

Opacidade: "0.5 ",
,
2000
);
);

Como você pode notar, envolvemos o animar método em a clique método de evento para que nossa animação seja invocada apenas quando clicar no botão. Ao pressionar o botão, obtemos o seguinte resultado:

Como você pode ver, conseguimos animar a opacidade usando o método animado.

O método show () e hide ()

Esses métodos são usados ​​para mostrar e ocultar elementos de uma página da web, a sintaxe de ambas as funções é quase idêntica como:

[jQuerry_selector $ ()].show (animation_speed, callback_function);
[jQuerry_selector $ ()].ocultar (animation_speed, callback_function);

Para demonstrar isso, digite as seguintes linhas em nosso arquivo HTML:

Eu posso desaparecer e reaparecer
Esconder
Mostrar

Você verá a seguinte página da web em seu navegador da web:

Como você pode ver, temos um div com algum texto dentro dele junto com dois botões que os usarão esconder e mostrar animações respectivamente.

Para a parte do jQuery, use as seguintes linhas de código no seu arquivo JavaScript:

$ ("#Show").clique (function ()
$ ("#Demo").show (2000);
);
$ ("#hide").clique (function ()
$ ("#Demo").Hide (2000);
);

Perceber: Passamos o tempo como 2 segundos, caso contrário, a mudança será instantânea e não obteremos uma animação como efeito.

Execute o arquivo e clique no botão Ocultar e você obterá o seguinte resultado:

Como você pode ver, recebemos uma animação atraente, o próximo passo é testar a animação do show clicando no botão Show. Portanto, clique no botão Mostrar e você obterá os seguintes resultados:

Como você pode ver, obtemos uma animação tranquila \ show

O método slide ():

Também podemos obter uma transição suave de slide com a biblioteca jQuery. Temos três funções para a animação de slides, eles são a saber:

• deslize para cima()
• Deslize para baixo()
• slideToggle ()

Para demonstrar isso, vamos implementar um método slideToggle (), use as seguintes linhas no arquivo html:

Eu posso desaparecer e reaparecer


Clique em mim para alternar o slide

Para o código jQuery, use as seguintes linhas no arquivo JavaScript:

$ ("#alternar").clique (function ()
$ ("#Demo").slidetoggle ("lento");
);

Você obtém o seguinte resultado na tela:

Como você pode ver, temos uma animação rápida e suave de alternância usando jQuery. Além disso, o jQuery fornece um monte de outros métodos de animação que você pode experimentar.

Conclusão

JQuery vem com alguns efeitos atraentes e métodos de animação que realmente destacam uma página da web. JQuery está focado em tornar a codificação de vários métodos, seletores e animação concisa para o desenvolvedor da web. É por isso que algumas das animações mais usadas são envolvidas em diferentes funções que podem ser invocadas sempre que o usuário deseja. Hoje, neste post, analisamos como usar o jQuery para implementar algumas das animações \ efeitos em nossa página da web.