+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: jQuery Chrome left (/thread-jquery-chrome-left)
jQuery Chrome left - Kartofelek - 20-02-2011
Wczoraj natknąłem się na ciekawy problem. Może jakaś literówka, ale nic nie wymyśliłem.
Na mojej stronie http://doman.art.pl na górze strony latają sobie chmurki. Skrypt do nich wygląda tak:
Kod:
var ile = 10;
var $chmurki = [];
var maxTop = 313-259;
var maxLeft = $(window).width()-400;
var minSpeed = 0.5;
var maxSpeed = 0.8; //minSpeed + maxSpeed
for (i=0; i<ile; i++) {
$chmurki[i] = $('<span class="chmurka'+((Math.random(1)>0.5)?'2':'1')+'"></span>');
if (i < ile/2) {
$chmurki[i].css('left',Math.random()*(maxLeft/2));
} else {
$chmurki[i].css('left',Math.random()*(maxLeft/2) + (maxLeft/2));
}
$chmurki[i].css('top',Math.random()*maxTop);
$chmurki[i].css({'opacity':0.5 + Math.random(0.5)});
$chmurki[i].speed = minSpeed + Math.random()*maxSpeed;
$chmurki[i].done = false;
$('.page_top').prepend($chmurki[i]);
$chmurki[i].show();
}
jQuery.animuj = function() {
for (i=0; i<ile; i++) {
var $ob = $chmurki[i];
$ob.css('left', $ob.position().left - $ob.speed); //* 1 *********
if ($ob.position().left <= 0 && !$ob.done) { //* 2 *********
$ob.done = true;
$ob.animate(
{left:-10,opacity:0},
500,
function() {
$(this).done = false;
$(this).css({
left : maxLeft,
top : Math.random()*maxTop
});
$(this).speed = minSpeed + Math.random()*maxSpeed;
$(this).removeClass().addClass('chmurka'+((Math.random(1)>0.5)?'2':'1'))
$(this).animate({
opacity: 0.5 + Math.random(0.5)
},500);
}
);
}
}
setTimeout(function() {
jQuery.animuj();
}, 33);
}
if (ile>0) {
jQuery.animuj();
}Interesujące mnie linijki oznaczyłem gwiazdkami.
We wcześniejszej wersji chmurka miała wylecieć poza ekran, czyli jej
left miało być < -400 (2 linijka). Niestety pierwsza z oznaczonych linijek w Chromie nie działała, i chmurka maksymalnie uzyskiwała 0, stąd w 2 oznaczonej linijce musiałem zmienić warunek z -400 na 0.
Teraz niby działa, ale może ktoś wie, czemu
Kod:
$ob.css('left', $ob.position().left - $ob.speed);w Chromie poniżej 0 nie działa?
Ps. offset() też nie przynosił rezultatu.
Pomyślałem sobie, że mógł bym left trzymać w tablicy jak resztę zmiennych. Drugie rozwiązanie to nie przesuwanie obiektu, a rozciągnięcie go na cały obszar i animacja tylko backgrounda. Może wtedy będzie lepsza wydajność?
O wiele lepiej by się pisało posty, gdyby to forum korzystało z syntaxhighlightu ( http://alexgorbatchev.com/SyntaxHighlighter/ )
RE: jQuery Chrome left - Kartofelek - 20-02-2011
Temat do zamknięcia. Poradziłem sobie.
Namąciłem w tym skrypcie i pewnie przez to gubił referencje czy coś takiego. Zastosowałem o wiele prostszą wersję i działa jak należy
RE: jQuery Chrome left - beny - 20-02-2011
nie odpowiem Ci wprost na zadane pytanie ale zwrócę na coś innego uwagę
1. pod chrome dla linuxa chmurki znikają, po wyjściu na kilkaset px z prawej strony
2. w firebugu zauważyłem, że opacity dla chmurek lubi przekraczać 1, a wiem, że chrome ma swoją wizję co do opacity i mogą z tego wynikać pewne nieprzewidziane problemy
najsensowniejsza moim zdaniem jest Twoja druga propozycja - rozciągnąć to na całą szerokość i animować background-position
z chęcią dowiem się o co chodziło
RE: jQuery Chrome left - Kartofelek - 20-02-2011
Teraz ci w 100% nie odpowiem, bo mam już nową wersję tego czegoś.
Może to to?
var $ob = $chmurki[i];
$ob.position().left <= 0 && !$ob.done)
Pod ob jest element tabeli który niby jest rozbudowanym o moje zmienne obiektem jquery, ale może jquery w chromie tutaj się gubiła/o? Chodzi dokładnie o position().left. Bo gdy trzymałem left w dodatkowej zmiennej okazało się, że działa.
Czyli przy początkowej deklaracji dodałem tą dodatkową zmienną:
$chmurki[i].left = .....
A potem wszystkie operacje robiłem w oparciu o tą zmienną.
Ale jak mówiłem. To już stara wersja, bo nowa jest na maksa uproszczona. Tam nawet to opacity nie musi być zmieniane, bo przecież chmurki nie znikają przy dotarciu do krawędzi, a po prostu wylatują za nią
Kod:
var ile = 10;
var $chmurki = [];
var maxTop = 313-259;
var maxLeft = $(window).width();
var minSpeed = 0.5;
var maxSpeed = 1.8; //minSpeed + maxSpeed
for (i=0; i<ile; i++) {
$chmurki[i] = $('<span class="chmurka'+((Math.random(1)>0.5)?'2':'1')+'"></span>');
if (i < ile/2) {
$chmurki[i].left = Math.random()*(maxLeft/2);
$chmurki[i].css('left',$chmurki[i].left);
} else {
$chmurki[i].left = Math.random()*(maxLeft/2) + (maxLeft/2)
$chmurki[i].css('left',$chmurki[i].left);
}
$chmurki[i].css('top',Math.random()*maxTop);
$chmurki[i].css({'opacity':0.5 + Math.random(0.5)});
$chmurki[i].speed = minSpeed + Math.random()*maxSpeed;
$('.page_top').prepend($chmurki[i]);
$chmurki[i].show();
}
jQuery.animuj = function() {
for (i=0; i<ile; i++) {
var $ob = $chmurki[i];
$ob.left = $ob.left - $ob.speed;
$ob.css('left', $ob.left);
if ($ob.left <= -400) {
$ob.left = maxLeft;
$ob.css({
left : maxLeft,
top : Math.random()*maxTop,
opacity:0.5 + Math.random(0.5)
});
$ob.speed = minSpeed + Math.random()*maxSpeed;
$ob.removeClass().addClass('chmurka'+((Math.random(1)>0.5)?'2':'1'))
}
}
setTimeout(function() {
jQuery.animuj();
}, 33);
}
if (ile>0) {
jQuery.animuj();
}