.text() immediately being processed
<p>I do not know what title to give so please I do apologize, i'm just getting curious why in the code below, the text is getting changed before it even fades out even if i've put it after a fade.</p>

<pre><code>$('form').submit(function(){
    return false;
});
$('button').on('click',function(){
    $(this).addClass('busy');
    $(this).parent().find('button').attr('disabled',true);
    $(this).parent().find("button:not('.busy')").fadeOut(500);
    $('p').text('Processing..').fadeIn(500).trigger('sfsfsf','wala');
});
$('p').on('sfsfsf',function(e,data){
    //this line below
    $(this).delay(1000).fadeOut(500).text('Complete!');
    $(this).fadeIn(500,function(){
        $(this).delay(500).fadeOut(500);
    });
});
</code></pre>

<p><a href="http://jsfiddle.net/v4nwQ/" rel="nofollow">http://jsfiddle.net/v4nwQ/</a></p>

<p>Why is that so, and how do i Fix it?</p>
