jQuery Chrome left

[Kartofelek]

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/ )

[Kartofelek]

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

[beny]

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

[Kartofelek]

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();
    }