Check out this code snippet I currently have. Notice how the text seems to jump when rerun? Give it a try and see for yourself.
The big question is: How can this be fixed?
$("#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>