[jQuery] Animatie vertraagt

[Ronnyrr]

Tweakers,

Een aantal dagen zit ik nu al met het volgende probleem.
Ik heb met jQuery een animatie gemaakt waarbij objecten van links naar rechts door het beeld bewegen.

Zodra deze aan de rechterkant uit het beeld gaat word deze terug gezet.
Dit werkt allemaal prima, echter zit ik met één probleem.

Het script word pas afgespeelt 20 sec. nadat de website geladen is.
De oorzaak hiervan kan ik niet achterhalen.

Eerst dacht ik dat het aan mijn delay lag, maar volgens mij is dat niet de oorzaak.
Op het eerste object ('.object' + i waar i = 1) zit namelijk geen delay, als ik dit goed heb?!

Ik maak gebruik van de volgende code:

JavaScript:

$(document).ready(function () {
    function links() {
        for(i = 1; i < 7; i++) {        
            $(".object" + i).delay(i*5000).animate({
                left : "+100%"
            }, 30000, 'linear', function() {
                $(this).css({
                    left : "-250px"
                });
                
                links();
            });
        }   
    }
    
    links();
});

Wellicht iemand een idee wat ik fout doe of tips hoe het beter kan?

[mdietger]

JavaScript:

$(".object" + i).delay(i*5000).animate({ 
                left : "+100%" 
            }, 30000, 'linear', function() { 
                $(this).css({ 
                    left : "-250px" 
                }); 
                 
                links(); 
            }); 

moet je vervangen door

JavaScript:

$(".object" + i).animate({ 
                left : "+100%" 
            }, 30000, 'linear', function() { 
                $(this).css({ 
                    left : "-250px" 
                }); 
                 
                links(); 
            }).delay(i*5000); 

Gewoon de delay van plaats veranderen dus

[Ronnyrr]

Na die aanpassing word de animatie wel sneller afgespeeld, maar zit er geen delay meer tussen de objecten.

[TheNephilim]

Je functie mag gewoon buiten de document.ready en voeg eens console.log('check'); toe in je functie... ipv check mag je ook wat anders neerzetten, maar dan kun je in je JS console gewoon zien wat er lang duurt.

[mdietger]

Probeer het volgende eens.

JavaScript:

$(document).ready(function () { 
    function links() { 
        for(i = 1; i < 7; i++) {         
            $(".object" + i).delay((i-1)*5000).animate({ 
                left : "+100%" 
            }, 30000, 'linear', function() { 
                $(this).css({ 
                    left : "-250px" 
                }); 
                 
                links(); 
            }); 
        }     
    } 
     
    links(); 
});

[Ronnyrr]

TheNephilim schreef op woensdag 23 januari 2013 @ 18:53:
Je functie mag gewoon buiten de document.ready

Dit werkt niet. Als ik die eruit haal kan ik wachten totdat ik een ons weg maar gaat niks zich animeren haha!
De console.log heb ik toegevoegd in mijn functie.

Echter snap ik niet helemaal wat deze doet.
In mijn console bij Chrome komt check te staan en zodra de animate opnieuw begint word er een optelling gemaakt voor

code:

check custom_jquery.js:3

mdietger schreef op woensdag 23 januari 2013 @ 18:58:
Probeer het volgende eens.

Ook dit werkt niet, heb het geprobeerd met verschillende waarde, -1, -2 & -3. Hoe hoger de waarde hoe meer objecten tegelijk animeren (logisch natuurlijk).

Really don't get it..

edit:
Heb er een jsFiddle van gemaakt
Code.
Groot.
(kleinere volledige snelheid & delay = een kleinere vertraging, apart?!)

[ Voor 10% gewijzigd door Ronnyrr op 23-01-2013 19:22 ]

[mdietger]

Snap eigenlijk niet goed wat het probleem is.
Kijk eens naar het volgende. Wanneer je nu start verschijnt het eerste blokje direct en ze komen allemaal aan de beurt.

http://jsfiddle.net/ThZUk/15/