Animere exspand

Tags:    css3 javascript jquery

Har en liste af elementer på en side som skal udvide sig når siden loades.
Det er en søjle diagram på siden så lige nu er kasserne/søjlerne bare i fast bredde når siden loades.
Ville gerne have at de "loadede" random, og udvidede sig til den endelige størrelse med forskellige delays.

Det er lidt ligesom det her: http://www.justinaguilar.com/animations/scrolling.html

Jeg har nu kunne lavet koden der laver animationen, men mangler lidt hvordan jeg på en pæn/nem måde laver random delay på elementerne så uanset hvor mange data man putter i så kommer de forskudt og ikke skal gøre noget specielt jeg manuelt skal sætte op på hver linie data.

Min kode: http://jsfiddle.net/272g9/

Sidder og tænker om jeg skal lave noget javascript der via jquery sætter en data attribut på hver linie om hvor længe den skal vente, eller hvordan gør jeg det nemmest/smartest?
Prøvede med noget delay via jquery, men kunne ikke få det helt til at virke.

Næste udfordring er så at udbygge det sådan så linierne reagerer på at blive synlige. Altså at de ikke popper ud før du scroller ned til dem hvor de er synlige.



4 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma
Sorter efter stemmer Sorter efter dato
http://jsfiddle.net/272g9/3/



Lagde mærke til de ofte kommer tæt på hinanden. Er det ikke muligt at få større spænd imellem dem?
Når den er kørt 10-15 gange så er der nogle gange den sidste linie slet ikke bliver vist.

http://jsfiddle.net/272g9/4/



Jeg tror det er jsfiddle der gør de ikke altid vises. Linierne har et tilfældigt delay ... Så jeg ved ikke lige hvad du mener med tiden imellem dem. Du kan evt. Ændre min og max hvis du vil have højere forskellighed

$(".data-type").stretchRight({min:800, max:2500}); som eksempel.



Jeg tror det er jsfiddle der gør de ikke altid vises. Linierne har et tilfældigt delay ... Så jeg ved ikke lige hvad du mener med tiden imellem dem. Du kan evt. Ændre min og max hvis du vil have højere forskellighed

$(".data-type").stretchRight({min:800, max:2500}); som eksempel.

Tak dan det hjalp med anden tidsrum.
Nu mangler jeg så blot at klassen først skal sættes på når elementet vises på den synlige del af skærmen.
Så ikke alle popper ud under den del hvor skærmen er synlig.



t