Question

I have the following Javascript code (using jQuery):

floatUpAndDown();
function floatUpAndDown() {
    $("#bird").animate({top: '+=30px'}, 1400)
              .animate({top: '-=30px'}, 1400, 'swing', floatUpAndDown);
}

#bird is an img tag that is absolutely positioned. Simply by looking at the code above, one should think that the bird would move 30px down, then back up 30px, and then loop forever. That is in fact exactly what happens, except for this: Over time the object happens to find itself closer and closer to the top of the page. When it has reached the top, it still continues to float up and down, but the y offset stops increasing. What do you make of this strange behaviour?

Answer 1

Sounds like a rounding error to me. You can fix it by adding a statement at the start of the function that automatically moves #bird to the correct starting position — imperceptibly, one would hope.