JQuery's .append() executes 6 times instead of 1

Question

Basically, what I'm trying to do is create a marquee type thing by scrolling vertically through the banners and then moving each to the bottom after it is out of view. I can't figure out why the banner is being appended six times. I realize that it's not quite complete so don't make a remark about that please. If you have a better suggestion, let me know. http://jsfiddle.net/vCuHc/2/

EDIT: How can I append the top element to the bottom and then remove the top element also?

Answer 1

You have six elements with the same class. This script runs once for each of the those elements.

Change the code that it runs once by appending to the parent div after the animations complete and not at the end of every animation.

Answer 2

It's being called against every element in the result of $('.tornado_banner') .

Answer 3

Instead of

function(){
...
        $("#banner_container").append(
            '<a class="tornado_banner" id="banner_alberta" href="#" style="top:' + elementNum * -130 + 'px">&nbsp;</a>'
        );

Try

function(){
   $(this).detach().appendTo("#banner_container");
}

Answer 4

If I understand your edit correctly,

var first = jQuery("#banner_container a:first");
jQuery("#banner_container").append(first);

That will remove the first element while appending it to the end of the list.