Ik wil mbv jquery een divje over het beeld laten gaan.
Eerst moet hij ontstaan en op het einde moet hij weg gaan.
Daar tussen moet hij een afstand overbruggen (horizontaal).
Dit moet niet gewoon in een rechte lijn maar hij moet wat op en neer gaan, dus niet zo heel simpel om op te klikken. Verder komen er ook meerdere verschillende met verschillende groten.
Zelf ben ik te werk gegaan en daar is dit komen uitrollen, maar kan dit ook korter?
$(function() {
// Box1
$('#box1').animate({"width" : "50px", "height" : "50px" });
$('#box1').animate({"left" : "50px", "top" : "25px" }, 400);
$('#box1').animate({"left" : "100px", "top" : "5px" }, 400);
$('#box1').animate({"left" : "95px", "top" : "105px" }, 400);
$('#box1').animate({"left" : "178px", "top" : "74px" }, 400);
$('#box1').animate({"left" : "224px", "top" : "105px" }, 400);
$('#box1').animate({"left" : "214px", "top" : "76px" }, 400);
$('#box1').animate({"left" : "254px", "top" : "111px" }, 400);
$('#box1').animate({"left" : "298px", "top" : "105px" }, 400);
$('#box1').animate({"left" : "350px", "top" : "100px" }, 400);
$('#box1').animate({"width" : "0px", "height" : "0px" });
// Box2
$('#box2').animate({"width" : "36px", "height" : "36px" });
$('#box2').animate({"left" : "50px", "top" : "100px" }, 400);
$('#box2').animate({"left" : "100px", "top" : "74px" }, 400);
$('#box2').animate({"left" : "95px", "top" : "84px" }, 400);
$('#box2').animate({"left" : "178px", "top" : "74px" }, 400);
$('#box2').animate({"left" : "224px", "top" : "65px" }, 400);
$('#box2').animate({"left" : "214px", "top" : "55px" }, 400);
$('#box2').animate({"left" : "254px", "top" : "45px" }, 400);
$('#box2').animate({"left" : "298px", "top" : "50px" }, 400);
$('#box2').animate({"left" : "350px", "top" : "100px" }, 400);
$('#box2').animate({"width" : "0px", "height" : "0px" });
// Box3
$('#box3').animate({"width" : "24px", "height" : "24px" });
$('#box3').animate({"left" : "50px", "top" : "75px" }, 400);
$('#box3').animate({"left" : "100px", "top" : "95px" }, 400);
$('#box3').animate({"left" : "95px", "top" : "87px" }, 400);
$('#box3').animate({"left" : "178px", "top" : "98px" }, 400);
$('#box3').animate({"left" : "224px", "top" : "87px" }, 400);
$('#box3').animate({"left" : "214px", "top" : "89px" }, 400);
$('#box3').animate({"left" : "254px", "top" : "79px" }, 400);
$('#box3').animate({"left" : "298px", "top" : "98px" }, 400);
$('#box3').animate({"left" : "350px", "top" : "99px" }, 400);
$('#box3').animate({"width" : "0px", "height" : "0px" });
});