使用动画jQuery更改文本 [英] Text changing with animation jquery

问题描述

我有一些有效的代码，但有时它只是跳到"其他文本而没有考虑间隔.

I have some code that works, but sometimes it just "jumps" to the other text without respecting the interval.

代码基本上在一定间隔上更改标题的文本.

The code basically changes a header's text on an interval.

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

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

If you guys can help me make this work,or even improve it I would be very thankful :)

提琴: http://jsfiddle.net/erbfqqxb/

推荐答案

我认为，当您的时间间隔赶上延迟和淡出的时间时，可能会引起问题.尝试在回调中运行每个动画，以便将其作为线性过程运行，以防止文本跳":

I think the problem may be caused when your interval catches up to the time taken for your delays and fades. Try running each animation in the callback so that it is run as a linear process to keep the text from "jumping":

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

更新了小提琴

这篇关于使用动画jQuery更改文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！