Introdução aos efeitos jQuery
O jQuery é uma das bibliotecas javascript mais populares, projetada para simplificar o DOM HTML, ou seja, as propriedades do modelo de objeto do documento, como manipulação e passagem pela árvore. Outras propriedades, como manipulação de eventos, Ajax e animação CSS também são simplificadas. É uma biblioteca de código-fonte aberto e gratuita, normalmente usada em 73% dos 10 milhões de sites em uso atualmente. Os principais recursos do jQuery incluem seletores, manipulação e passagem baseados em elementos DOM, o que torna o trabalho no jQuery muito mais fácil e conveniente. Neste tópico, vamos aprender sobre os efeitos do jQuery.
É usado para fornecer uma interface muito simples para fazer vários tipos de efeitos surpreendentes. Esses métodos permitem usar e aplicar rapidamente os efeitos de recursos mais comumente usados, além de configurações simples ou mínimas. O comando para mostrar e ocultar elementos é praticamente o mesmo que qualquer pessoa disposta a vê-los esperaria. O comando Show () é usado para mostrar os elementos em um conjunto totalmente empacotado e o comando hide () é usado para ocultá-los.
Diferentes métodos de efeito jQuery:
Aqui discutimos alguns tipos diferentes de métodos de efeito jQuery
1) Animar ()
O método animate é usado para executar uma animação personalizada para um conjunto de propriedades CSS. Este método é usado para alterar o estado do elemento de um estado para outro, juntamente com os estilos CSS. O valor da propriedade é alterado gradualmente, de modo que um efeito animado possa ser alcançado. O que deve ser observado é que apenas valores numéricos podem ser animados, como a margem: 40px. Por outro lado, os valores para seqüências de caracteres não podem ser animados, como cor de fundo: verde. Isso de novo vem com uma exceção para seqüências de caracteres como o show, ocultar e alternar.
Sintaxe
(selector).animate((styles), duration, easing, callback)
Exemplo
$("label").click(func()(
$("#box").animate((height: "100px"));
));
2) Atraso ()
Como o nome sugere, este é usado para definir o atraso para todas as funções que estão na fila nos elementos selecionados.
Sintaxe
$(selector).delay(duration, NameOfQueue)
Exemplo
$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));
3) fadeToggle ()
Esta função é usada para alternar entre as funções de desvanecimento e desvanecimento em caixas diferentes. Se algum elemento desaparecer, essa função fadeToggle () poderá ser usada para substituí-lo. Os elementos que estão no formato oculto não serão exibidos como parte deste método.
Sintaxe
$(selector).fadeToggle(duration, easing, callback)
Exemplo
$("label").click(func()(
$("#box").fadeToggle();
));
4) fadeTo ()
Este método é usado para alterar a opacidade de todos os
isto é, elementos relacionados a parágrafos gradualmente. A opacidade especificada neste contexto refere-se à opacidade do efeito variável.
Sintaxe
$(selector).fadeTo(duration, opacity, easing, callback)
Exemplo
$("label").click(func()(
$("p").fadeTo(100, 0.9);
));
5) clearQueue ()
Este método é o mesmo que sugerido pelo nome. Isso é usado para limpar a fila e remover todos os itens da fila que não foram executados. A função concluirá sua execução assim que começar a executar. Isso está relacionado a dois métodos viz. fila () e desenfileirar ().
Sintaxe
$(selector).clearQueue(NameOfQueue)
Exemplo
$("label").click(func()(
$("box").clearQueue();
));
6) acabamento ()
Esse método no jQuery é usado para finalizar ou finalizar o animador atualmente em execução, pois é usado para parar todas as animações em execução no momento e é usado para remover todas as animações enfileiradas. Também é usado para concluir todas as animações para uma gama variada de elementos selecionados. Esse método é semelhante a métodos como .stop, que possui os dois parâmetros verdadeiros. A principal diferença entre esse método e o acabamento é que o método de acabamento é usado para parar e pausar os tipos de propriedades do elemento CSS de todas as animações em fila.
Sintaxe
$(selector).finish(NameOfQueue)
Exemplo
$("#complete").click(func()(
$("div1").finish();
));
7) desenfileirar ()
Este método é usado para remover a próxima função da fila e, em seguida, é usado para executar a função. Uma fila é uma ou mais funções que estão no pipeline aguardando para serem executadas. Esse método de remoção da fila é usado junto com o método da fila. Um elemento pode ter várias filas. A fila fx é a mais comum, que também é a fila padrão.
Sintaxe
$(selector).dequeue(NameOfQueue)
Exemplo
$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));
8) slideDown ()
Este é outro método útil no jQuery que é usado para deslizar para baixo ou mostrar as listas de elementos selecionadas. O ponto a ser observado aqui é que ele também funciona nos elementos que estão no formato oculto e o tipo de exibição é mostrado como nenhum no caso do CSS, mas a visibilidade não precisa ser oculta.
Sintaxe
$(selector). slideDown (duration, easing, callback)
Exemplo
$("label").queue(func()(
$("p").slideDown();
));
9) slideUp ()
O método slideUp () é usado para ocultar todas as
elementos selecionados. Os elementos que estão no formulário oculto não serão exibidos. Portanto, isso não afeta o layout da página.
Sintaxe
$(selector).slideUp(duration, easing, callback)
Exemplo
$("label").queue(func()(
$("p").slideUp();
));
10) slideDown ()
Ao contrário do método slideUp (), esse método é usado para mostrar todas as informações ocultas.
elementos. Esse método slidedown () funciona em todos os elementos que também estão relacionados aos métodos ocultos no caso dos métodos jQuery e o nome também é exibido no CSS, mas a visibilidade não está oculta.
Sintaxe
$(selector).slideDown(duration, easing, callback)
Exemplo
$("label").queue(func()(
$("p").slideDown();
));
11) Alternar ()
Este método é usado para alternar entre mostrar e ocultar vários
elementos baseados. Este método é usado para verificar a visibilidade dos elementos. O método show () é usado para executar mesmo quando o elemento está oculto. Hide () é executado mesmo quando o elemento está visível. Os métodos show e hide em combinação criam um efeito de alternância e, portanto, o método alternar ().
Sintaxe
$(selector).toggle(duration, easing, callback)
Exemplo
$("label").queue(func()(
$("p").toggle();
));
12) slideToggle ()
Este método é usado para alternar entre as funções slideUp () e slideDown () para todos os elementos com base no parágrafo. Este método é usado para verificar os elementos selecionados para visibilidade. SlideDown () é a função que pode ser vista em execução quando o elemento está oculto. Por outro lado, o elemento slideUp () é aquele que deve ser executado se o elemento estiver visível.
Sintaxe
$(selector).slideToggle(duration, easing, callback)
Exemplo
$("label").queue(func()(
$("p").slideToggle();
));
O jQuery nos permite adicionar os efeitos na página da web, fornecendo inúmeras quantidades de funções que podem ser colocadas em diferentes seletores. É com você, como você deseja tornar seus sites mais cheios de efeitos. Espero que você tenha gostado do nosso artigo. Fique ligado no nosso blog para mais artigos como esses.
Artigos recomendados
Este é um guia para os efeitos do jQuery. Aqui discutimos os diferentes tipos de métodos de efeitos do jQuery com sintaxe e exemplo. Você também pode consultar o seguinte artigo para saber mais -
- Usos do JQuery
- Alternativas ao jQuery
- Comandos de consulta do MySQL
- O que é o procedimento no SQL?
- jQuery querySelector