um. Mostre, esconda
O método de exibição no jQuery é: .show () e o método oculto é: .hide (). Quando não há parâmetros, é difícil exibir e ocultar o conteúdo.
$ ('. Mostrar'). Clique (function () {// Defina eventos de gatilho $ ('#caixa'). show (); // show}); $ ('. hide'). clique (function () {// Defina eventos de gatilho $ ('#caixa'). hide (); // hide});Nos métodos .show () e .hide (), um parâmetro pode ser passado, que controla a velocidade em milissegundos (1000 milissegundos é igual a 1 segundo). Também é rico em velocidade constante para aumentar e diminuir, bem como a mudança de transparência.
$ ('. Mostrar'). Clique em (function () {$ ('#caixa'). Mostrar (1000); // Demorou 1 segundo para exibir}); $ ('. Hide'). Clique (function () {$ ('#Box'). Ocultar (1000); // Levou 1 segundo para ocultar});Além de usar milissegundos diretamente para controlar a velocidade, o JQuery também fornece três seqüências de parâmetros de velocidade predefinida: lento, normal e rápido, correspondendo a 600 milissegundos, 400 milissegundos e 200 milissegundos, respectivamente.
$ ('#caixa'). show ('lento'); // 600 milissegundos $ ('#caixa'). Show ('normal'); // 400 milissegundos $ ('#caixa'). Show ('rápido'); // 200 milissegundosNOTA: Se passa por milissegundos ou passando seqüências predefinidas, se você acidentalmente passar um erro ou passar uma string vazia. Em seguida, levará o valor padrão: 400 milissegundos.
Use as funções de retorno de chamada de .show () e .hide () para obter efeitos de animação da fila.
(1) Ligue para si mesmo usando o nome da função
$ ('. Mostrar'). Clique (function () {$ ('#box'). Mostrar ('Slow', function Showspan () {$ (this) .Next (). Show ('Slow', Showspan);});})(2) Use argumentos.callee para chamar funções anônimas
$ ('. Mostrar'). Clique (function () {$ ('#box'). Show ('lento', function () {$ (this) .next (). show ('lento', argumentos.callee);});})Quando usamos .show () e .hide (), se precisarmos de um botão para alternar, precisamos fazer alguns julgamentos condicionais. E o jQuery nos fornece um método separado com funções semelhantes: .toggle ().
$ ('. TOLGLE'). Clique em (function () {$ (this) .toggle ('lento');});dois. Slide e Scroll jQuery fornece um conjunto de métodos para alterar a altura dos elementos: .slideUp (), .slacewn () e .slideToggle (). Como o nome indica, encolher para cima (rola) e se expande para baixo (slides).
$ ('.Nota: Os efeitos deslizantes e rolantes são os mesmos que os efeitos ocultos e os mesmos parâmetros.
três. Desaparecer, desaparecer
O jQuery fornece um conjunto de métodos especificamente para alterações de transparência: .Fadein () e .Fadeout (), que representam desaparecer e desbotar, respectivamente, e é claro que há também um método de comutação automática: .FadetoGGle ().
$ ('. em'). Clique em (function () {// falso em $ ('#caixa'). Fadein ('lento');}); $ ('. });Os três métodos de transparência acima podem ser apenas de 0 a 100, ou de 100 a 0. Se quisermos definir o valor especificado, não há como. O jQuery fornece um método .fadeto () para resolver esse problema.
$ ('. TOLGLE'). Clique em (function () {$ ('#box'). Fadeto ('lento', 0,33); //0.33 significa que o valor é 33%});PS: o número de valores é de 0 a 1, correspondendo à porcentagem
Quatro. Animação personalizada
O JQuery fornece vários aspectos de animação fixa simples e comumente usados que usamos. Mas, às vezes, essas animações simples não podem atender às nossas necessidades mais complexas. No momento, o jQuery fornece um método .animate () para criar nossas animações personalizadas para atender aos requisitos mais complexos e mutáveis.
$ ('. Animate'). Clique (function () {$ ('#caixa'). Animate ({'width': '300px', 'fontSize': '50px', 'opacidade': 0,5});});Nota: Uma mudança CSS é um efeito de animação. No exemplo acima, já existem quatro alterações no CSS, e o efeito do movimento síncrono de várias animações foi alcançado.
Existe apenas um parâmetro que deve ser passado, que é um objeto com um estilo CSS do par de valores-chave. Existem dois parâmetros opcionais, a saber, as funções de velocidade e retorno de chamada.
$ ('. Animate'). Clique (function () {$ ('#box'). Animate ({'width': '500px', 'altura': '400px',}, 2000, function () {alert ('Execution concluído');});});Até agora, criamos animações com posições fixas que ainda estão. Se você deseja implementar imagens de movimentos de bits em estados de movimento, deve usar animações personalizadas e combiná -las com a função de posicionamento absoluta do CSS.
$ ('. Animate'). Clique (function () {$ ('#Box'). Animate ({'top': '300px', // O posicionamento absoluto do CSS deve ser definido primeiro 'esquerda': '200px'});});PS: o objeto de referência deve ser definido primeiro no CSS e o posicionamento absoluto
Na animação personalizada, cada movimento inicial deve estar na posição inicial ou no estado inicial e, às vezes, queremos animá -lo através da posição ou estado atual. O JQuery fornece as funções de adicionar e diminuir as animações personalizadas.
$ ('. Animate'). Clique (function () {$ ('#caixa'). Animate ({esquerda: '+= 100px', largura: '+= 100px', altura: '+= 100px'});});cinco. Método de animação da fila
Já podemos implementar a animação da fila antes. Se for o mesmo elemento, pode ser chamado em sequência ou concatenado. Se for um elemento diferente, você pode usar a função de retorno de chamada. Mas, às vezes, existem muitas animações da fila, e a legibilidade da função de retorno de chamada é bastante reduzida. Para esse fim, o JQuery fornece um conjunto de métodos usados especificamente para animações na fila.
// conectado não pode ser implementado na fila de sequência
$ ('#caixa'). Slide ('lento').
NOTA: Se o método de animação for animado, a ligadura poderá ser filada em sequência, enquanto o método .css () não é um método de animação e será antes que a fila seja passada. Em seguida, a função de retorno de chamada do método de animação pode ser usada para resolver o problema.
// Use a função de retorno de chamada para forçar a fila do método .css () para .sledown () após $ ('#caixa'). Slide -up ('lento').Mas se for esse o caso, quando houver muitas animações na fila, a legibilidade não apenas diminuirá, mas o método de animação original não é claro o suficiente. Portanto, nossa idéia é que cada operação seja seu próprio método independente. Em seguida, o jQuery fornece um método semelhante a uma função de retorno de chamada: .Queue ().
// Use o método .Queue () para simular o método de animação após seguir o método de animação $ ('#caixa'). Slide -up ('lento').Agora, queremos continuar adicionando uma animação oculta ao método .Queue (), mas descobrimos que era impossível implementá -lo. Isso é causado pelo recurso .Queue (). Solução: a função de retorno de chamada do .queue () do jQuery pode passar por um parâmetro, que é a próxima função. Chame o método próximo () no final para executar a animação da fila.
// Use o próximo parâmetro para implementar a animação da fila de chamadas contínuas $ ('#caixa'). Slide -up ('lenta').PS: .Queue () O método também tem outra função, que é obter a duração da fila de animação atual (não demonstrada em detalhes)
O jQuery também fornece um método funcional para limpar as filas: .clearqueue (). Coloque -o em uma função de retorno de chamada na fila ou método .queue (), e as filas restantes executadas podem ser removidas.
// Limpe a fila de animação $ ('#caixa'). seis. Métodos relacionados à animação
Muitas vezes, é necessário parar de executar animações, e o jQuery fornece um método .stop () para isso. Possui dois parâmetros opcionais: .Stop (ClearQueue, Gotoend); ClearQueue passa um valor booleano, que representa se deve limpar a fila de animação não executada, e o Gotoend representa se deve pular diretamente a animação em execução para o último estado.
$ ('. Animate'). Clique em (function () {$ ('#caixa'). Animate ({'esquerda': '300px'}, 1000); $ ('#caixa'). Animate ({'top': '300px'}, 1000); $ ('#caixa'). Animate ({'width': ':': ':': ':': ':': '; $ ('#caixa'). Animate ({'altura': '300px'}, 1000); $ ('. Stop'). Clique em (function () {$ ('#caixa'). Stop (true, false);});// Nota: O primeiro parâmetro indica se deve cancelar a animação da fila, o padrão é falso. Se o parâmetro for verdadeiro, a animação da fila subsequente será cancelada quando houver uma animação na fila. O segundo parâmetro indica se atinge o final da animação atual e o padrão é falso. Se o parâmetro for verdadeiro, ele chegará ao fim imediatamente após a parada. Você pode copiar e experimentar você mesmo.
Às vezes, ao executar animações ou animações na fila, há um atraso antes do movimento, e o jQuery fornece o método .Delay () para isso. Este método pode definir um atraso antes da animação ou adicioná -lo no meio da animação na fila.
// O atraso de início é 1 segundo, o atraso do meio é 1 segundo. $ ('. Animate'). Clique em (function () {$ ('#caixa'). Atraso (1000) .animate ({'esquerda': '300px'}, 1000); $ ('#caixa'). Animate ('Bottom': '300px'}},); 'Largura': '300px'}, 1000);argumentos.Callee é executado em que função representa qual função. Geralmente usado em funções anônimas. Nas funções anônimas, às vezes você precisa se chamar, mas como é uma função anônima, não tem nome e é ajustável. Neste momento, argumentos.callee podem ser usados em vez de funções anônimas
// executar recursivamente o eu, executar loop infinito $ ('#caixa').A propriedade $ .fx.off pode desativar todos os efeitos da animação.
$ .fx.off = true; // O padrão é falso
Todos são entendidos.
O exposto acima é o compartilhamento de código de efeito de animação do jQuery apresentado pelo editor. Espero que seja útil para você.