Javascript simple floating and forever moving image

In this example, I will show you how to  animate an element and make it moving up and down infinitely. And I will do it without any explicit Loop construct (no for, while loops), with the help of the jQuery.

HTML:

Javascript

 How it works

In CSS, we set the element (the IMG) to absolute position so that it “float up” and detach from the normal layout. With this, we can move the image up and down by changing the “top” CSS property.

In Javascript, we define two functions, bannerMoveDown() and bannerMoveUp(). In each function, we use the jQuery animate() method to animate the IMG element, and after the each animation ends, we call the other one respectively, thus making it loop forever.

Finally, we call bannerMoveDown() to initiate the animation loop.

Fully functional example

Please checkout a fully function example here on JSFiddle: http://jsfiddle.net/madcoda/mN3n8/

Thanks for reading, Leave your comments down below if you encounter any problem!

Share your thoughts