Question: I'd like to achieve something [like this](http://roblutter.com) (fading animated arrow at the bottom of the header picture indicating that the user needs to scroll down).
In order to to this I'm planning to use the code below.
The issue is that the animation only plays 1x whereas I would like it to play continuously (in a way that wouldn't take too much resource). See <http://jsfiddle.net/ZN3aD/>

```
$('.icon').css('display', 'block');
$('.icon').animate({ opacity: 1 }, 0);
$('.icon').animate({ opacity: 0, top: "100px" }, 'slow');

```

Answer: 
Here's a solution:

```
var arwtimer = 0;

$('.icon').css('display', 'block');
$('.icon').animate({ opacity: 1 }, 0);

function pleaseScroll() {
    $('.icon').css({ top: 80 }, 0).animate({ opacity: 1 }, 222);;

    $('.icon').delay(999).animate({ opacity: 0, top: "100px" }, 999);
}

arwtimer = setInterval(pleaseScroll, 4000);

```

<http://jsfiddle.net/rvvb2/>
This should do the trick. Adding setInterval will repeat the animation placed inside function:

```
     function runAnimation(){

     $('.icon').css('display', 'block');
     $('.icon').animate({ opacity: 1 }, 0);
     $('.icon').animate({ opacity: 0, top: "100px" }, 'slow');

                }

var interval = setInterval(runAnimation,1000);

```