jquery animation with nested effects loop

Question

I have a nested function to show/hide paragraphs news-ticker-style.

The problem is that when the loop starts over (line 4), the opacity effects stop working correctly so the paragraphs appear abruptly.

Any jquery masters know about this? Am I making this too hard?

$('#special-ticker p').hide();
var a=0;
function outer() {
    function inner() {
        if(a===$('#special-ticker p').length) { a = 0; }
        $('#special-ticker p').
        eq(a).
        fadeIn(800, function(){
            $(this).animate({opacity:100},10000,null,function(){
                $(this).hide(800,function(){
                    a++;
                    outer();
                });
            });
        });
    }
    return inner();
}
$(function(){ 
    outer(); 
});

Answer 1

the problem is line 9:

$(this).animate({opacity:100},10000,null,function(){
//...

opacity should be "1" (opacity is a value between 0 and 1)

$(this).animate({ opacity : 1 }, 10000, null, function() {

Answer 2

Try this:

            newsticker = function (selector) {
                $(selector).hide();
                var i = $(selector).length - 1;
                var toggle = function() {
                    $(selector).eq(i).fadeOut("slow", function() {
                        i = ++i % $(selector).length;
                        $(selector).eq(i).fadeIn("slow", function() {
                            setTimeout(toggle, 1000)
                        });

                    });
                };          
                toggle();
            };

and initialize it with this:

            new newsticker("#special-ticker p");