0

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

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 秒后再次激活。

我怎样才能使这个动画流畅？非常感谢提前

4

2 回答 2

2

如果你想淡出改变HTML淡入你可以这样做 

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

于 2013-05-31T17:45:56.577 回答
1

可能，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]);
}
于 2013-05-31T17:16:20.403 回答