JQuery Jumpy Fading

Question

This Is the code i have at the moment, You can see that on re-run the text sort of jumps? Take a look you will see what I mean.

So the question: How to fix this?

$("#aboutUsText").delay(1000).fadeOut(1000)
$("#aboutUsText").attr("MyState", "1")
setInterval(function () {
    $("#aboutUsText").delay(1000).fadeOut(1000)
    var text = $('#aboutUsText');
    if (text.attr("MyState") == "1") {
        text.text('Text 1');
        $("#aboutUsText").delay(1000).fadeIn(1000)
        text.attr("MyState", "2");
    } else if (text.attr("MyState") == "2") {
        text.text('Text 2');
        $("#aboutUsText").delay(1000).fadeIn(1000)
        text.attr("MyState", "3");
    } else {
        text.text('Text 3');
        $("#aboutUsText").delay(1000).fadeIn(1000)
        text.attr("MyState", "1");
    }
}, 3000);


<p id="aboutUsText">Hello</p>

Answer 1

I think I know what your going for and went ahead and wrote a quick way to do it. You can see it here

JsFiddle

    var showTime = 1000; // time before fade
var fadeOutDuration = 300;
var fadeInDuration = 500;
var textIncrementer = 1;
AnimateText();

function AnimateText() {

    setTimeout(function() {
        jQuery("#aboutUsText").fadeTo(fadeOutDuration, 0, function() {
            if (textIncrementer == 1) {
                displayText = "Second text";
            }
            if (textIncrementer == 2) {
                displayText = "Third text";
            }    
            if (textIncrementer > 2) {
                displayText = "Fourth+ text";
            } 
            textIncrementer++;
            jQuery("#aboutUsText").html(displayText);
            jQuery("#aboutUsText").fadeTo(fadeInDuration, 1, function(){
                AnimateText();
            });

        });
    }, showTime);
}