Temat: jquery, animate i IE...

Mam prosta funkcjonalnosc, ktora przesuwa klikniety obrazek. Wykorzystuje do tego jquery.animate i ustawiam po prostu nowe left (obrazek przesuwa sie w poziomie).

Pod FF, Opera, Chrome dziala poprawnie. Pod IE animacja nie istnieje, jesli mam ustawione na "fast" to po prostu widze obrazek w pozycji docelowej, jelsi na slow, to wyglada to jakby odswiezanie bylo ustawione na 200ms i obrazek przeskakuje w 3 skokach na miejsce docelowe...

Strona jest napisana w HTML 5, tag img otoczony jest tagiem figure, animate jest na figure.

Bede wdzieczna za sugestie...

Temat: jquery, animate i IE...

... nie uzywaj IE bo to torf nie z tej ziemi!
to Szatan jest! :)

Temat: jquery, animate i IE...

jakie IE (ver) przede wszystkim?
I skoro html5 + ie, to czy uzywasz jakiegos google-shiva czy innego narzedzia uzdatniajacego nowe tagi dla tej przegladarki szatana?

Temat: jquery, animate i IE...

Nie widzę rozwiązania więc mogę co najwyżej zgadywać. Obstawiam to że IE po prostu nie wydala.
Ta przeglądarka ma tragiczną wydajność. Wersja 9 dopiero ma osiągi podobne do konkurencji kiedy zaprzęgła kartę graficzną itp do renderowania strony.

Animacja w Javascript nie istnieje. Robi się ją w ten sposób że oblicza się różnicę pomiędzy początkowym "left" a końcowym, obstawia się krok i ile px ma zostać przesunięty obrazek z każdym krokiem.

I tu tkwi problem. Javascript przesuwa obrazek (1 krok). Przeglądarka zmienia położenie obrazka na stronie. Zanim to zrobi, kolejny krok się wykonuje i znowu trzeba przesunąć ten obrazek. I koniec w końcu widok nie nadąża za wykonywanym kodem i animacji po prostu nie widać.

Ale pewności nie ma bez sprawdzenia rozwiązania.

Temat: jquery, animate i IE...

@Dariusz Półtorak:

Nie do końca tak są tworzone animacje w JS jak to opisałeś. W ten sposób ciężka animacja w ogóle by się nie kończyła, bo metoda z setInterval którą opisałeś (wnioskuję z: kolejny krok wykonuje się przed zakończeniem poprzedniego) ma możliwość odroczenia jedynie jednego wywołania. Następne, jeśli przeglądarka nie nadąża, lecą w kosmos - http://ejohn.org/blog/how-javascript-timers-work/
Gdyby było tak jak mówisz, to wykonywałby się zaledwie pierwszy i drugi krok animacji i na tym koniec.

Z tego powodu wykorzystuje się inną metodę - zapętlone setTimeouty, gdzie następny timer jest uruchamiany dopiero po skończeniu wykonywania poprzedniego kroku. Całego wykonywania, a więc łącznie z przerenderowaniem strony. I nie oblicza się z wyprzedzeniem ile ma się element przesunąć na klatkę, tylko tworzy się funkcję zależną od teraźniejszego microtime'a. Dzięki temu nieważne kiedy uda się odpalić kolejny timer, to element zanimuje do stanu jaki powinien w tym momencie mieć.

Co więcej - nowsze przeglądarki udostępniają ciekawsze metody niż setTimeout na tworzenie animacji - requestAnimationFrame. Metoda ta optymalizuje ilość fpsów w zależności od obciążenia, momentu kiedy jest dla niej samej optymalnie wykonać krok i tego czy w ogóle renderować trzeba (bo może np. okno jest zwinięte).

@Maja Miarecka:

Tak jak napisała Lidia - cóż to za wersja, jakich bibliotek używasz, czy wykonałaś jakieś proste testy i czy w ogóle popatrzyłaś w konsolę?

Temat: jquery, animate i IE...

No wiec tak konsola ani firebug nic nie mowia, wg nich wszystko bangla. Bo w sumie bangla, bledami nic nie rzuca. A to jak sie renderuje, to juz nie problem js...

Kod jest banalny. Za pomoca jquery tworze tag figure a w nim img. Ustawiam left na jakas wartosc. Oczywiscie uzywam google-shiva, zeby IE w ogole zauwazylo, co robie. Tutaj wszystko gra i buczy. Problem pojawia sie, gdy na figure wykonuje funkcje animate i zmieniam left o iles tam pixeli. Tutaj zaczynaja sie problemy z plynnym przesuwaniem obrazka pod IE.

Ogolnie tetsuje pod IE8 (to mam dostepne od reki), ale wedlug zalozen powinno banglac i pod 7...

Andrzej Winnicki:
... nie uzywaj IE bo to torf nie z tej ziemi!
to Szatan jest! :)

Ale to nie ja decyduje... Ja IE mialam do pewnego czasu zablokowane na firewallu... az cos mnie podkusilo, zeby we frontendowca sie pobawic...

Temat: jquery, animate i IE...

Można zobaczyć kod? Nie powinno być problemów z wydajnością, więc może kod jest niewydajnie napisany? Może w każdej pętli wykonujesz niepotrzebne operacje, nie przechowujesz kopii odwołań do obiektów DOM poza pętlą, może coś jeszcze innego?

Temat: jquery, animate i IE...

Tutaj tworze figure:

var createElement = function (w, h, left, id, photo, caption, HTMLclass) {



var nid = Math.round(Math.random()*100)*1000 + (id*1);



var figure = $("<figure>").css({"z-index":1,"width":w+"px","height":h+"px","left":left+"px","cursor":"pointer"}).attr("id",(nid+1)).attr("onclick","moveElements(this)").addClass(HTMLclass);



var img = $("<img>").attr("src","photo/co/" + photo).attr("alt", caption).css({"z-index":2,"width":w+"px","height":h+"px"});



var figcaption = $("<figcaption>").text(caption); $("body").append(figure.append(img).append(figcaption));



};

A tu animuje:

var figures = $("figure").each(function(index) {

 $(this).animate({"left": newLeft}, "slow"); 

};

Temat: jquery, animate i IE...

Maja Miarecka:
Tutaj tworze figure:

var createElement = function (w, h, left, id, photo, caption, HTMLclass) {



var nid = Math.round(Math.random()*100)*1000 + (id*1);



var figure = $("<figure>").css({"z-index":1,"width":w+"px","height":h+"px","left":left+"px","cursor":"pointer"}).attr("id",(nid+1)).attr("onclick","moveElements(this)").addClass(HTMLclass);



var img = $("<img>").attr("src","photo/co/" + photo).attr("alt", caption).css({"z-index":2,"width":w+"px","height":h+"px"});



var figcaption = $("<figcaption>").text(caption); $("body").append(figure.append(img).append(figcaption));



};

A tu animuje:

var figures = $("figure").each(function(index) {

 $(this).animate({"left": newLeft}, "slow"); 

};

Trudno zdiagnozować dlaczego pod IE są takie problemy - nie powinno ich być. Powyższy kod trochę bym zmodyfikował (na szybko i bez sprawdzania), np. :

var createElement = function (w, h, left, id, photo, caption, HTMLclass) {



	var nid = Math.round(Math.random()*100)*1000 + (id*1),

		figure = $("<figure />", {

			css: {

				zIndex: 1,

				width: w,

				height: h,

				left: left,

				cursor: 'pointer'

			},

			id: nid + 1,

			click: function(e) {

				e.preventDefault();

				moveElements(this);

			},

			"class": HTMLclass

		}),

		img = $("<img>", {

			src: "photo/co/" + photo,

			alt: caption,

			css: {

				zIndex: 2,

				width: w,

				height: h

			}

		}),

		figcaption = $("<figcaption>", {

			text: caption

		});

		$("body").append(figure.append(img).append(figcaption));

	$("figure").animate({"left": newLeft}, "slow");



};