Accentsconagua

jQuery succintamente effetti jQuery

Codice
Share

Disabilita tutti i metodi di effetto jQuery

È possibile disabilitare tutti i metodi di animazione forniti da jQuery semplicemente impostando il valore di via proprietà a vero.

    
Prova ad animarmi!

quando via è impostato per vero, tutti i metodi di effetto non si animeranno e saranno invece nascosti e mostrati immediatamente usando le regole CSS display: none e blocco di visualizzazione. Puoi riattivare l'animazione passando il via proprietà a falso valore.

    
 Prova ad animarmi!

Groking the stop () Metodo di animazione

Spesso è necessario interrompere un'animazione attualmente in corso prima di avviarne un'altra. Ad esempio, quando si utilizza l'abitudine MouseEnter e mouseLeave eventi (o hover () metodo), è possibile attivare involontariamente un elemento che è già in animazione a causa di un precedente MouseEnter o mouseLeave evento. Ciò causa un accumulo di animazioni accodate, che si traduce in un'interfaccia lenta. Per evitare questo, usa semplicemente il Stop() metodo per interrompere l'animazione corrente prima di iniziarne una nuova.

    
 Passa il mouse sopra di me!

Rimuovi il Stop() metodi dal codice e fai scorrere il mouse sull'elemento diverse volte per vedere le animazioni fantasma che si verificano. Il rollover continuo sull'elemento nella pagina provocherà l'accumulo dell'animazione, che in genere non è il risultato desiderato.

Gli appunti: Inoltre, è possibile non solo interrompere l'animazione corrente nella coda per l'elemento select ma anche l'intera coda passando il Stop() metodo un parametro di true. Questo fermerà in modo efficace tutte le animazioni in coda, attive e inattive.

Determinare se un elemento sta animando usando: animato

L'abitudine :animato il filtro selettore può essere utilizzato per selezionare gli elementi che stanno attualmente animando. Di seguito, utilizzo questo filtro selettore personalizzato per aggiungere testo a un'animazione

elemento.

Usando show (), hide () e toggle (), Without Animation

Usando il mostrare(), nascondere(), e ginocchiera () i metodi con un parametro fanno sì che gli elementi vengano mostrati o nascosti per animare cambiando le proprietà CSS: altezza, larghezza, opacità, margine, riempimento. È possibile saltare le animazioni per nascondere e mostrare gli elementi semplicemente non passando alcun parametro. Questo cambia il modo in cui questi metodi regolano la visibilità di un elemento. Gli elementi interessati appariranno o scompariranno senza alcuna animazione regolando il CSS display proprietà invece.

       
Fai clic su Me (nascondi animazione)
 
Fai clic su Me (nascondi senza animazione)

Gli appunti: I metodi jQuery nascondere(), mostrare(), ginocchiera (), scorrere verso l'alto(), scorrere verso il basso(), slideToggle (), se usato su elementi che hanno un CSS display valore di in linea, sarà cambiato in blocco di visualizzazione per la durata dell'animazione.

Animazioni sequenziali e non sequenziali di Groking

È importante comprendere la differenza tra le animazioni che si verificano contemporaneamente e le animazioni che si verificano in un ordine sequenziale nel tempo. Per impostazione predefinita, quando i metodi di effetto sono concatenati, vengono aggiunti a una coda e ogni effetto si verifica uno dopo l'altro.

    
 Animami! 
 
 Animami!

Usando il animare() metodo, è possibile impostare le animazioni in modo non sequenziale o allo stesso tempo passando tutte le modifiche alle proprietà CSS in un singolo animare() chiamata al metodo. Nel codice qui sotto, il

animerà la sua larghezza e la larghezza del bordo sinistro allo stesso tempo.

    
Animami!

Animate () è la base, l'astrazione di basso livello

Il animare() metodo è il metodo di base che viene utilizzato per costruire tutte le animazioni preconfigurate, ad es. nascondere(), scorrere verso il basso(). Fornisce la possibilità di modificare (nel tempo) i valori delle proprietà dello stile.

Ecco cosa devi sapere quando usi questo metodo.

  • Sono supportate solo le proprietà che accettano valori numerici. In altre parole, non è possibile animare il valore di, diciamo, il colore di sfondo proprietà (almeno non senza un plugin). Inoltre, proprietà che richiedono più di un valore backgroundPosition non può essere animato.
  • Puoi animare le proprietà CSS usando em e% dove applicabile.
  • Le animazioni relative possono essere specificate usando "+ =" o "- =" davanti al valore della proprietà. Ciò, ad esempio, sposterebbe un elemento positivamente o negativamente rispetto alla sua posizione corrente.
  • Se si specifica una durata dell'animazione pari a 0, l'animazione imposterà immediatamente gli elementi sul loro stato finale.
  • Come scorciatoia, se un valore di ginocchiera viene passato, un'animazione semplicemente si inverte da dove si trova e si anima a tal fine.
  • Tutte le proprietà CSS impostate tramite un singolo animare() il metodo si animerà allo stesso tempo.

Groking the jQuery Fading Methods

Tre concetti devono essere richiamati quando si usa il fadeIn (), dissolvenza(), e fadeTo () metodi.

  • A differenza di altri metodi di effetto, i metodi di dissolvenza regolano solo l'opacità di un elemento. Si presume che quando si usano questi metodi di effetto, qualsiasi elemento sbiadito abbia già un'altezza e una larghezza.
  • Le animazioni in dissolvenza svaniranno gli elementi dalla loro opacità corrente.
  • Usando il dissolvenza() il metodo svanirà un elemento dalla sua opacità corrente, e quindi una volta che il 100% è sbiadito, cambierà la proprietà di visualizzazione CSS dell'elemento in "nessuna".

Ciascuno dei suddetti punti è illustrato nel seguente codice.
Codice
×