JQuery Jumpy Fading

Question

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

我想我知道你的目标是什么，并继续前进并写了一个快速的方法来做到这一点。你可以在这里看到它

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);
}