Cross-Browser-jQuery Übergang Animation?

Question

Gibt es jQuery 1.3 Animation-Übergänge, die sowohl in Firefox 3 und IE7 arbeiten?

Ich habe eine Tabelle mit mehreren Tabellenzeilen (25 oder mehr), mit einigen der Zeilen versteckt Starten (diese Zeilen alle teilen eine gemeinsame Klasse, in diesem Beispiel, es ist „.hidden“). In dem Tabellenkopf ist ein „mehr“ -Link, die über .click () an eine Funktion gebunden ist, die die ausgeblendeten Zeilen zeigen, und dann die „Show mehr“ auf „Weniger anzeigen“ und die .click ändern (), um eine Funktion, die das Gegenteil der Fall ist.

In jeder .click () Funktion gibt es eine Zeile wie

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

mit .show () ersetzt mit .Hide () für die "Show weniger" -Funktion.

Allerdings, wenn ich versuche, die .show () / zu ersetzen. Hide () mit .fadeIn () /. FadeOut (), IE macht es als fast identisch mit .Show () /. Hide () außer es dauert eine Minute für .Hide () zu übernehmen. Keine wirkliche Animation gibt. Inferior in IE, obwohl es große Firefox funktioniert.

Wenn ich versuche, .slideDown zu verwenden () /. SlideUp () ist es ähnlich janky in IE, fast identisch .Show () /. Hide () außer mit einem seltsam pulsierenden Effekt unmittelbar nach dem Übergang abgeschlossen ist. Firefox 3 Drosseln auf sie als gut, scheinbar nur die Zeilenbreite der Tabellenzeilen vergessen werden gezeigt und macht das Ganze schrecklich aussehen.

Animationen saugen Also nur in IE7? Gibt es eine Möglichkeit, einen anmutigen und reibungslosen Übergang in diesem Fall zu haben, die in beiden Browsern funktionieren werden?

Answer 1

Nach jQuery Kompatibilität diese Art der Sache ein Fehler und sollte gemeldet werden.

Answer 2

Oft mehrere, gleichzeitige Animationen aufweisen, können für IE hart sein. Der Javascript-Engine ist einfach nicht überall in der Nähe von Safari oder Firefox oder Chrome. Dies gilt sowohl für IE6 und IE7. Ich habe nicht mit IE8 noch gearbeitet.

Eine Sache, die ein wenig helfen kann, wird mit statischen Höhen eingestellt auf die Elemente, die Sie zu animieren versuchen. Aus einer CSS / Layout Perspektive, ist dies in der Regel nicht ideal, aber ... dies ermöglicht jQuery die Aufgabe, die zunächst berechnen die Höhe jedes Element zu überspringen, bevor es die Höhe des Elements beseelt.

In der Regel können Sie Animationen die gleiche Art und Weise nähern Sie eine SLR-Kamera würde. (Stick mit mir hier). Wenn Sie versuchen, Schnellfeuer-Aufnahmen von einer Sportveranstaltung zu nehmen, würde jeder Fotograf empfiehlt den Fokus der Einrichtung, ISO und Verschlusszeit vor der Zeit. Auf diese Weise die Kamera nicht all dieses Zeug zwischen jedem Schuss berechnen hat und man kann einfach den Auslöser gedrückt halten und Klack-Klack-Klack-Klack. A-Team Stil.

Wie auch immer, wenn es um Animationen kommt, versuchen Denken der Dinge die Sie Javascript für die Animation berechnen muss geschehen. Opazität, Höhe, berechnet Höhe (Elementbreite + Grenze + padding), Bildposition, sind alle gute Plätze zu starten.

Oft kann man tatsächlich sehen, was jQuery in das DOM ist das Hinzufügen als Animationen starten (mit Firebug ) . Wie auf einer Opazität Animation, können Sie den Stil = siehe „Opazität: 1;“ wobei unmittelbar vor dem Countdown hinzugefügt 0 beginnt.

Answer 3

Ich würde nicht allzu explizit sein, wenn es um Leistungen in allen Browsern zu sprechen. Ehrlich gesagt, habe ich einige schwere JS-Animationen zu sehen, die Webkit Schrei machen, während FF und IE damit umgehen ziemlich gut.

Sie müssen nur bedenken, dass Browser unterschiedliche CSS und JS-Implementierungen haben, die irgendwann machen es schwer mit dem Finger auf den Schuldigen hinter dem enttäuschenden Leistung zu zeigen.

IE nehmen. Wenn Sie ein Block-Level-Element 4000x4000 und eine 2x2 transparent gif Satz zu wiederholen, jedes Mal, wenn Sie würde, Gott bewahre, bewegen Sie das Element IE wird die 2x2 gif neu zu zeichnen und die Alpha für jeden, 2000-mal über berechnen. FF entweder speichert den Hintergrund oder einen dramatisch unterschiedlichen Neuaufbau, in jedem Fall die Leistungen unvergleichlich sind. Es hat nicht gesagt, dass im Handbuch, die Sie gerade sein müssen vorsichtig, wie und was Sie tun.