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: 
Set it up as a recursive function which calls itself when the animation completes. ([**JSFiddle demo**](http://jsfiddle.net/ZN3aD/3/)).

```
$('.icon').css('display', 'block');

function animate() {
    // jQuery's CSS method should be used instead of an instant animation
    $('.icon').css({ opacity: 1 });

    $('.icon').animate({
        opacity: 0,
        // jQuery handles the units for you, so you can just use a number here
        top: 100
    },'slow', function() {
        // I assume you want the top value to be reset here
        $(this).css({ top: 80 });

        // Call the animate() function again when the animation has completed
        animate();
    });
}

// Trigger the animation initially
animate();

```
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/>