我有一些有效的代码,但有时它只是“跳转”到其他文本而不考虑间隔。
该代码基本上按时间间隔更改标题的文本。
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/
最佳答案
我认为当您的间隔 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);
});
});
}
关于javascript - 文本随动画 jquery 变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32330233/