JavaScript setInterval将仅运行一次jQuery

Question

I have a fiddle here: http://jsfiddle.net/justinboyd101/4nrbb/

Here is my question:

Why are my console.log function and my statement to add html to a div working, while it's not running on my other looping jQuery function?

For more details, please read below:

I'm trying to create a news ticker using setInterval. The animation is supposed to slide text in from the right side of the screen, then push the content down, then reset back to its original position. For some reason it will only run animations once. I've set up a simple function where ever interval will gather information from the array and add it to an empty div.

Here is my code if you do not wish to go to jsfiddle:

HTML

<div id="newsValueText" class="newsValueText floatLeft darkBlue">
    <ul id="newsTicker" class="newsTicker">
        <li name="tick" ph="tick1">We have in-store technical support.</li>
        <li name="tick" ph="tick2">Option 2</li>
        <li name="tick" ph="tick3">Option 3</li>
        <li name="tick" ph="tick4">Option 4</li>
        <li name="tick" ph="tick5">Option 5</li>
        <li name="tick" ph="tick6">Option 6</li>
    </ul>
</div>
<div id="log"></div>

JS

//Get the ticker elements
var tickText = document.getElementById('newsTicker').getElementsByTagName('li');
var tickNum = tickText.length;
//New Array to clear empty data
var tickArry = [];
//Loop through list items and add non-void data to new loop
for(var a = 0; a < tickNum; a++) {
    if ($(tickText[a]).html() != '') {
        tickArry.push($(tickText[a]));
    }
}
//Loop int
var i = 0;
var log = document.getElementById('log');
//Self-invoking function for ticker animation
function animTick() {
    console.log($(tickArry[i]));
    log.innerHTML += $(tickArry[i]).html();
    //Make current tick item fall down
        $(tickArry[i]).animate({'padding-top' : '+=50px'}, 500,
            function() {
                //Once tick item is off screen, reset values
                $(this).css({'margin-left' : '9999px', 'padding-top' : '0'});
            });
        //Increment item
        i++;
        //If the tick has reach its length then reset
        if (i === tickNum) {
            i = 0;
        //Else call the animation for the next tick
        }
    }
    //Immediately animate in first list item
    $(tickArry[i]).animate({'margin-left' : '0px'}, 2000);
    //Add a delay
    setInterval(animTick, 3000);

Answer 1

Use setTimeout() if you are recursively calling the same function.

Your setInterval() alternative would be:

function animTick() {
    // Function definition
}

setInterval(animTick, 3000);

Answer 2

What if you include $(tickArry[i]).animate({'margin-left' : '0px'}, 2000); inside your animTick function?

Demo: Fiddle