Efeitos do jQuery | Explicado
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
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
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
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.