Question

Possible Duplicate:
How do I loop this animation indefinitely?

Could someone please show me how i could get this script to repeat or loop (as in not end the animation function and continue it forever and ever and ever).

I am very new to javascript so would be grateful if someone is able to show me what i can do to make this happen.

Thank you.

$(document).ready(function() {
    var rageImg = $('.foo');
    $(rageImg).animate({top:'+=100px'}, 1000).animate({top:'-=100px'}, 1000);
});

Answer 1

CSS only:

.foo {
  animation:sway 1s infinite alternate;
  position:relative;
}
@keyframes sway {
  from {top:0px}
  to {top:100px}
}

Add -webkit prefixes (-webkit-animation, @-webkit-keyframes) for Chrome support.

Works in IE10, Firefox 16 (add -moz- prefixes for Firefox 5 though 15), and Chrome 4.

Since this is most likely aesthetic, not being supported is no big deal.

jQuery answer:

$(function() {
  $('.foo').animate({top:'+=100px'},1000)
                   .animate({top:'-=100px'},1000,arguments.callee);
});