Animazione di transizione jQuery tra browser?

Question

Esistono transizioni di animazione jQuery 1.3 che funzionano sia in Firefox 3 che IE7?

Ho una tabella con più righe di tabella (25 o più), con alcune delle righe che iniziano nascoste (queste righe condividono tutte una classe comune; in questo esempio, è " .hidden "). Nell'intestazione della tabella c'è un " Mostra di più " link associato tramite .click () a una funzione che mostrerà le righe nascoste, quindi cambierà " Mostra di più " a " Mostra meno " e cambia il .click () in una funzione che fa il contrario.

In ogni funzione .click (), c'è una linea come

$(this).parents("tbody").children("tr.hidden").show();

con .show () sostituito con .hide () per " Mostra meno " funzione.

Tuttavia, se provo a sostituire .show () /. hide () con .fadeIn () /. fadeOut (), IE lo rende quasi identico a .show () /. hide () tranne che richiede un minuto per rendere effettivo .hide (). Nessuna vera animazione lì. Inferiore in IE, sebbene funzioni alla grande Firefox.

Se provo a usare .slideDown () /. slideUp (), è allo stesso modo janky in IE, essendo quasi identico a .show () /. hide () tranne che con uno strano effetto pulsante subito dopo aver completato la transizione. Anche Firefox 3 soffoca su di esso, apparentemente dimenticando solo la larghezza delle righe della tabella mostrata e rendendo l'intero aspetto terribile.

Quindi le animazioni fanno schifo in IE7? Esiste un modo per avere una transizione gradevole e regolare in questo caso che funzionerà in entrambi i browser?

Answer 1

Secondo pagina di compatibilità di jQuery questo genere di cose è un bug e dovrebbe essere segnalato.

Answer 2

Spesso le animazioni multiple e simultanee possono essere difficili per IE. Il motore Javascript non è vicino a Safari, Firefox o Chrome. Questo vale per IE6 e IE7. Non ho ancora lavorato con IE8.

Una cosa che può aiutare un po 'è avere altezze statiche impostate sugli elementi che stai cercando di animare. Dal punto di vista CSS / layout, questo di solito non è l'ideale, ma ... questo consente a jQuery di saltare il compito di dover prima calcolare l'altezza di ciascun elemento prima che l'animazione dell'altezza dell'elemento.

In generale, potresti avvicinarti alle animazioni come faresti con una fotocamera reflex. (Resta con me qui). Se stai provando a scattare foto a fuoco rapido di un evento sportivo, qualsiasi fotografo consiglia di impostare in anticipo messa a fuoco, ISO e velocità dell'otturatore. In questo modo la fotocamera non deve calcolare tutte queste cose tra ogni scatto e puoi semplicemente tenere premuto il pulsante di scatto e fare clic-clic-clic-clic. Stile A-Team.

Ad ogni modo, quando si tratta di animazioni, prova a pensare a cose che JavaScript deve calcolare affinché l'animazione possa avvenire. Opacità, altezza, altezza calcolata (larghezza elemento + bordo + imbottitura), posizione dello schermo, sono tutti buoni punti di partenza.

Spesso, puoi effettivamente vedere ciò che jQuery sta aggiungendo al DOM all'avvio delle animazioni (usando Firebug ) . Ad esempio, in un'animazione di opacità, puoi vedere lo stile = " opacity: 1; " viene aggiunto prima dell'inizio del conto alla rovescia per 0.

Answer 3

Non sarei eccessivamente esplicito quando parliamo di prestazioni attraverso i browser. Francamente, ho visto alcune animazioni pesanti di JS che faranno piangere il webkit, mentre FF e IE lo gestiscono abbastanza bene.

Dovrai solo considerare che i browser hanno diverse implementazioni CSS e JS che a volte rendono difficile puntare un dito sul colpevole dietro le tue prestazioni lente.

Prendi IE. Se hai un elemento a livello di blocco 4000x4000 e un gif trasparente 2x2 impostato per essere ripetuto, ogni volta che ti piacerebbe, ti prego, spostare l'elemento IE ridisegnerà il gif 2x2 e calcolerà l'alfa per ognuno, 2000 volte. FF memorizza nella cache lo sfondo o ha un ridisegno drammaticamente diverso, in entrambi i casi le prestazioni sono incomparabili. Non ha detto che nel manuale, devi solo stare attento a come e cosa stai facendo.