Animation with JQuery, please show me a better "way"

Sorry but iam an JS Newbie (-: I have to animate some span tags inside an div, this code works but it looks horrible..

$('#div span.t1').fadeIn(1500, function() {
        $(this).next().fadeIn(1500, function() {
            $(this).next().fadeIn(1500, function() {
                $(this).next().fadeIn(1500, function() {
                    $(this).next().fadeIn(1500, function() {
                        $(this).next().fadeIn(1500, function() {
                            $(this).next().fadeIn(1500, function() {
                                $(this).next().fadeIn(1500, function() {
                                    $(this).next().fadeIn(1500, function() {
                                        $('#ownage').animate({
                                            backgroundColor: 'red',
                                            color: '#FFF',
                                            fontSize: '30px'
                                        }, 2000);
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });

Html Example:

<div id=开发者_如何学Go"div">
<span class="a1">TEXT1</span>
<span class="a2">TEXT2</span>
...
</div>

Is there a "faster" way?

Add a class lastSpan to the last span that you are animating and try the following bit of code. Haven't tried it so not sure how well it works.

$('#div span.t1').fadeIn(1500, FadeInNext);

function FadeInNext() {
    if ($(this).hasClass('lastSpan')) {
        $(this).next().fadeIn(1500, AnimateOwnage);
    } else {
        $(this).next().fadeIn(1500, FadeInNext);
    }
}

function AnimateOwnage() {
    $('#ownage').animate({
        backgroundColor: 'red',
        color: '#FFF',
        fontSize: '30px'
    }, 2000);
}

Maybe recursively like this (assuming that $('#ownage') is nested in the spans) :

function myFadeIn($elem, $stop, duration) {
   if($elem.is($stop)) {
        $stop.animate({
            backgroundColor: 'red',
            color: '#FFF',
            fontSize: '30px'
        }, 2000);
        return;
   }
   else {
        $elem.fadeIn(duration, function () {
            myFadeIn($elem.next(), $stop, duration);
        });
   }
}

myFadeIn($('#div span.t1'), $('#ownage'), 1500);

It is not really faster as we're still using the same general flow. It is more for trying to make it more readable I guess. Maybe something like:

function animateStart() {
  var curSpan = $('#div span.t1');
  curSpan .fadeIn(1500, function(){animateNext(0,curSpan)});
}

function animateNext(x,curSpan) {
   var nextSpan = $(curSpan).next();
   if(x < 10) {//or use another forking condition
     nextSpan.fadeIn(1500,function(){animateNext(x+1,nextSpan)});
   }else {
     $('#ownage').animate({
                           backgroundColor: 'red',
                           color: '#FFF',
                           fontSize: '30px'
                           }, 
               2000);
   }
}