I am preparing web-presentation and I would like to use jQuery animation to move some content. 

This animation consists of sequence of actions. Here is the code of script:

2. <!-- Script moving elements of animation -->
3. <script type="text/javascript"> 
4.       var speed=2000, txt="";
5. function animacja(){
6. $('.firstArrow').animate({top:-70, left:650},speed, function(){
7.                   $('#refreshImage').fadeOut(500, function(){
8. $('#refreshImageGreen').animate({ transform: 'rotate(180deg)'}, 1000, function(){
9. $('#refreshImage').fadeIn(500);
10. $('#etlArrow').animate({left:1100}, function(){
11.       //restarting positions of arrows
12.       $('#erpArrow').css({left:430, top:-270});
13.       $('#scmArrow').css({top:-120, left:430});
14.       $('#crmArrow').css({top:30, left:430});
15.       $('#otherArrow').css({top:180, left:430});
16.       $('#etlArrow').css({left:680});
17.       });
18.       });
19.  });
20.      });
21. }
22. $(document).ready(function(){
23.       animacja();
24.       //introductionInterval=setInterval(animacja, 6500);
25. });

And here is the link for you to take a look at it:

http://apollogic.com/bi_presentation/#/intro1

 

The problem is that green arrow is moving few times in a row. It should be moved once and stopped. Then its position should be reset to starting position.

Do you have any ideas for fixing that?

Best Regards,

Adrian