javascript - 文本随动画 jquery 变化

Question

我有一些有效的代码，但有时它只是“跳转”到其他文本而不考虑间隔。

该代码基本上按时间间隔更改标题的文本。

var text = ["text1", "text2", "text3","text4","text5"];
var index = 0;

$("#description").fadeOut("slow");

setInterval(function(){
    $("#description").html(text[index]).fadeIn("slow");
    $("#description").delay(400).fadeOut("slow");
    index++;
    if (index == 5) {
        index = 0;
    };
}, 1800);

如果你们能帮助我完成这项工作，甚至改进它，我将非常感激:)

fiddle :http://jsfiddle.net/erbfqqxb/

Answer 1

我认为当您的间隔 catch 延迟和淡入所用的时间时，可能会导致问题。尝试在回调中运行每个动画，使其作为线性过程运行，以防止文本“跳跃”:

var text = ["text1", "text2", "text3","text4","text5"];
var index = 0;
var description = $("#description");

description.fadeOut("slow", changeText);

function changeText(){
    // run the initial animation
    description.html(text[index]).fadeIn("slow", function() {


       // run the second animation after the first one has finished - can remove the delay if you want to
       // the delay here is how long you want the text to be visible for before it starts to fade out
        description.delay(400).fadeOut("slow", function() {
            index++;
            //measure against array length instead of hard coded length
            if (index == text.length) {
                index = 0;
            };

            //set the delay before restarting animation sequence (only restart once the sequence has finished)
            setTimeout(changeText, 400);
        });
    });
}

Updated fiddle