Witam

Animuję 5 obiektów (3 x div, 2 x img) każdemu zmieniam tylko szerokość i wysokość. W Chrome działa perfekcyjnie. W Firefox 9 już gorzej, a w Internet Explorerze 8 szkoda słów. Potworne lagi.

Da się to jakoś zoptymalizować? Wiem, że 5 animacji to sporo, ale powiększam tylko rozmiary. Skalowanie dwóch obrazków jest tak kosztowne? Może słyszał ktoś o jakichś sposobach optymalizacji. Kod:



Skaluję wszystkie trzy divy i oba obrazki.

Dodam, że zależy mi najbardziej na tym, by na firefoxie działało lepiej. I jeszcze Opera, animacje ma ok, ale jeszcze animuję główny suwak strony, i już działa skokowo. Skąd takie ustrojstwo?

A po co bezsensownie wsadasz je w tabele?
Poza tym możesz uzyć http://playground.benbarnett.net/jquery-animate-enhanced/

W table to wrzucam by wycentrować w pionie zawartość. Najlepsza metoda, działa najpłynniej na najpopularniejszych przeglądarkach. Tak przynajmniej wychodziło jeśli chodzi o mój kod.

Co do tego pluginu to bardzo ciekawy, ktoś się musiał nieźle napocić. Niestety u mnie poprawia się tylko na Chromie gdzie i tak mam już dobrą jakość, i na Operze, co jest dla mnie mało istotne. Na Firefox na którym mi zależy się pogoszyło, tak samo na IE.

A jakiej wersji jquery używasz?
Poza tym spróbuj http://microjs.com/#jsanimation
O ile dobrze pamiętam to jquery nie wspiera requestAnimationFrame więc animacje nie zawsze będą płynne...
Poza tym jakbyś wystawił to na jsfiddle aby można było potestować byłoby fajnie

Używam jQuery 1.6.4

Próbowałeś animacji w css3?

Załadowałem już plugin o którym wspomniał wookieb. Miał on dostosowywać jeśli to możliwe animację do CSS3, ale pogorszyło to tylko sprawę.

Nie, napisz sobie po prostu animacje w css3, najszybciej:

[CSS] pobierz, plaintext 
 img:hover {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
[CSS] pobierz, plaintext 

http://bugs.jquery.com/ticket/8101


Skalowanie obrazków, niestety, daje najbardziej popalić. Wiele zależy tu od konfiguracji przeglądarki - w Chrome chyba domyślnie jest wykorzystywane dopalanie GPU, dlatego działa płynnie; do tego dochodzi sposób interpolacji (niektóre wygładzają, niektóre nie).

Puść gdzieś to na żywo, wtedy coś więcej będzie można powiedzieć.

Już to widziałem ale... http://code.jquery.com/jquery-1.7.1.js i znajdź wystąpienie słowa "requestAnimationFrame"

We firefoxie cały czas mam włączone wspomagania sprzętowe. Więc to chyba wynika z jakości przeglądarki i wsio. Gdy chociaż udało się upłynnić animację scrollowania strony. Niestety nie mogę pokazać ani oryginalnego kodu, ani uploadować to gdzieś i pokazać. Może ktoś wie coś na temat animacji scrolla w firefoxie? Kod JS wygląda tak:



Dałem linear bo bajerów nie potrzebuję, a trochę to usprawniło działanie, jednak nadal za mało. Strona przewija się ewidentnie skokowo. Co jest cholernie dziwne, bo jak to wyłączę i sam przewijam to jest płynnie. Kompletnie bez sensu.

EDIT:

Płynność w Firefoxie osiągnięta!

Podczas animacji ustawiam w kaskadzie styli parametr image-rendering na optimizeSpeed a po animacji przywracam na optimizeQuality. I wszystko pięknie gra!

Nie co przyśpieszyłem też na IE robiąc to samo ale z parametrem -ms-interpolation-mode. Jednak nadal muli że cholera bierze.