jQuery Continues loop with the image

Question

I have below kind of animation.But I need to animate it continues rather than go top and suddenly start it again.In other words smooth animation from bottom to top and then again start from the bottom (Like a Loop).Can I have any help ?

JS

var ticker = $('#ticker');
var container = $('#ticker > div');
var spacing = ticker.outerHeight() - ticker.height();

function animator(currentItem) {
    var distance = currentItem.outerHeight() + spacing;

    var currentTop = parseInt(container.css('margin-top'), 10);

    var duration = (distance + currentTop) / 0.05;

    container.animate({
        marginTop: -distance
    }, duration, "linear", function () {
        var parent = currentItem.parent();

        currentItem.detach();
        parent.css("marginTop", 5);

        parent.append(currentItem);
        animator(parent.children(":first"));
    });
};


animator(container.children(":first"));
ticker.mouseenter(function () {
    container.stop();
});

ticker.mouseleave(function () {
    animator(container.children(":first"));
});

URL for the JSFiddle

Answer 1

Something along these lines should do the trick

Demo:http://jsfiddle.net/sampath_lokuge/u8027Lgf/

function animator(currentItem) {
    var distance = currentItem.outerHeight() + spacing;

    var currentTop = parseInt(container.css('margin-top'), 10);

    var duration = (distance + currentTop) / 0.05;

    console.log('animating up');
    container.animate({
        marginTop: -distance
    }, duration, "linear", function () {
        // Now reverse the animation
        console.log('animating down');
        container.animate({
            marginTop: 0
        }, duration, "linear", function () {
            animator(container.children(":first"));
        });
    });
};

Answer 2

Try http://jsfiddle.net/u8027Lgf/1/

instead of

parent.append(currentItem);

try something like

 currentItem.css("display", "none");
 parent.append(currentItem);
 currentItem.fadeIn('slow');