Efectos colas en jQuery

No manual jQuery xa tratamos en varios artigos de efectos en jQuery. De feito, este xa é o cuarto artigo que pretendía tratar as diferentes formas de crear efectos sobre este marco de JavaScript. Ata a data publicamos as claves para a creación de efectos simples, o método animado versátil () para realizar a animación dos atributos numéricos CSS ou as funcións de crear efectos derretidos.

Todos estes métodos discutidos anteriormente e algúns máis que aínda non revisamos como Sleceup () ou SLEDDDOWN (), que funcionan de xeito similar ao xa visto Fadein () ou FadeOut () métodos, Servir para realizar efectos variados nas páxinas web e é tan sinxelo de usar como invocalos no obxecto jQuery que contén o elemento que queremos fomentar. Agora que xa superamos este primeiro paso e xa coñecemos toda unha gama de efectos simples, aprenderemos a cadea varios efectos para executar un despois do outro.

Veremos neste artigo e varios que o farán ocorrer, que os efectos de encadernación son tan sinxelos como chamar a todos os métodos de efecto que queremos facer. Todos estes métodos serán incluídos automaticamente nunha cola e executaranse un despois do outro, sen ter que facer nada por conta propia, ademais da propia invocación dos métodos.

Funcións de efecto

Repetiremos ao longo dos seguintes elementos un concepto que quero explicar para saber o que nos referimos. Son as “funcións de efectos” que son dispoñibles por jQuery para crear efectos especiais nas páxinas web. Como dixemos, en varios artigos anteriores, os efectos de varias das funcións de efectos dispoñibles xa foron explicadas e mostradas.

As funcións de efectos son os métodos jQuery que fan que un cambio nos elementos da páxina se amolece, é dicir , que alteran as propiedades dun ou máis elementos progresivamente, nunha animación ao longo do tempo.

Por exemplo, temos o método FADEOUT (), que realiza un efecto de opacidade nun ou máis elementos, facéndoos desaparecer da páxina cun melador opaco transparente. O método complementario Fadein () fai un efecto de fundición similar, pero transparente ao opaco. Como estes, temos numerosos métodos de efectos adicionais en jQuery como animar (), sliceup () e slicedown (), etc. Na documentación do marco, na sección Efectos da referencia da API, podemos ver unha lista completa destas funcións de efectos.

Neste manual jQuery xa vimos varios exemplos sobre estas funcións de efectos e ao longo dos seguintes artigos que publicaremos en desenvolvementoWeb .com veremos varias outras aplicacións de mostra onde podemos seguir aprendendo.

cola de efectos por defecto

Cando invocamos varias funcións de efectos dos dispoñibles en jQuery, ingresan nunha cola de efecto por defecto, chamada “FX”. Cada elemento da páxina ten a súa propia cola de efectos por defecto e funciona automaticamente. Ao invocar os efectos que están poñéndose na cola e están funcionando automaticamente, un despois do outro, coa orde en que foron invocados.

Layer = $ (“# micapa”); capa. Fadeout ();
Layer.fadein ();
Layer.Slideup ();
Layer.SlIDednown ();

As funcións de efectos, un despois do outro, invocáronse nun instante, pero non o fan Executar todo dunha soa vez, pero espérase que termine o anterior antes de comezar o seguinte. Afortunadamente, JQuery fai todo por conta propia para xestionar esta cola.

Como dicimos, cada elemento da páxina ten a súa propia cola de efectos e, aínda que poderiamos incluso crear outras colas de efectos para o mesmo elemento, en maioría dos casos teremos abondo coa cola estándar xa aplicadas.

Exemplo de execución efectos na cola por defecto do jQuery

imos lanzar varios efectos nunha capa e imos ver como eles mesmos son executado en orde a medida que os invocamos.

Teremos un elemento DIV, así:

< Div > Esta capa que vai ser animada, nun loop infinito … < / div >

Agora podemos ver unha función que realiza a invocación en varios efectos de jQuery:

Función Colla ()> “Font-size”: “1.5em”
}, 2000);
Layer.Hide (1000);
Layer.Show (1000); Lay.Animate ({
“esquerda” : “350px”,
“Top”: “50px”
}, 1500); Cabo.Animate ({
“Font-size”: “0.75em”
}, 2000 ); Capa.Animar ({
“esquerda”: “100px”, “Top”: “20px”
}, 1500, collatefects);
}

debe ser corrixido que o último do As funcións de efecto invocadas fan unha chamada a esta mesma función, mediante unha devolución de devolución, polo que, cando se terminen todos os efectos, será invocado de novo e haberá un ciclo infinito, onde vai repetir todo o tempo Secuencia de efectos.

E agora podemos comezar esta función cando a páxina está lista:

$ (documento) .ready (función () { Colatefects () ;
});

O resultado do exercicio completo pódese ver nunha páxina separada.

Con isto fixemos o noso primeiro exemplo de cola de efectos. Foi doado, certo? Pero, por suposto, a partir de aquí, a cousa pode complicar todo o que queiramos, ou necesitamos. No seguinte artigo comezaremos a explicar os modos existentes en jQuery para alterar as colas de efectos, facer cousas como pararlas, analizalas, cargar funcións doutros tipos para executar na cola, etc.

Leave a Comment

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *