Question

嗨，我有这段代码以这种方式在预定的时间内循环：

var array = [
    "tip 01",
    "tip 02",
    "tip 03",
    "Tip 04",
    "Tip 05",
];
var i = 1;
var pippo = $("#div");

setInterval(function() {            
     pippo
        .fadeToggle()
        .html(array[i]);
        i++;
if (i == array.length){i=0;}

    }, 7000);

所以div的内容将是数组的单元格。你可以看到这个#div应用了一个fadeToggle效果，所以如果#div可见则会淡出，反之亦然。

问题在于动画无法正常工作。

当动画开始时，它首先显示#div内容（没有动画）而不是淡出而不是淡出......

我想#div它只是淡入淡出。

认为我注意到它就像循环在7秒内循环两次。因为如果我写：

setInterval(function() {            
     pippo
        .fadeIn()
        .html(array[i])
        .fadeOut();
        i++;
if (i == array.length){i=0;}

    }, 7000);

褪色效果被激活两次，如淡出渐弱淡出淡入淡出淡出效果，再过7秒后再次淡出淡出效果。

如何让这个动画流畅？非常感谢提前

Answer 1

如果你想fadeOut changeHTML fade，你可以这样做

var array = [
"tip 01",
"tip 02",
"tip 03",
"Tip 04",
"Tip 05",
];
var i = 0;
var pippo = $("#div");
function f(){
    pippo.fadeOut(function(){
        pippo.html(array[i]).fadeIn(function(){
            i++;
            if (i == array.length){i=0;}
            setTimeout(f, 7000);
        });
    });
}
setTimeout(f, 7000);

jsfiddle

Answer 2

可能，fadeToggle功能操作重叠，试试这个：

var array = [
    "tip 01",
    "tip 02",
    "tip 03",
    "Tip 04",
    "Tip 05",
];
var i = 1;
var pippo = $("#div");

function fader() {            
    pippo.fadeToggle(function(){
        i++;
        if (i == array.length){i=0;}
        setTimeout(fader, 7000) 
    }).html(array[i]);
}

fadeToggle（）首先显示元素然后fadeIn和Out

2 个答案: