fadeToggle() 首先显示元素，然后是 fadeIn 和 Out答案

【问题标题】：fadeToggle() first show the element then fadeIn and OutfadeToggle() 首先显示元素，然后是 fadeIn 和 Out
【发布时间】：2013-05-31 17:08:02
【问题描述】：

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

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

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

【问题讨论】：

创建一个 jsfiddle 来帮助人们帮助你..
对不起@Nelson，你是对的......

标签： jquery fadein setinterval fadeout

【解决方案1】：

如果你想淡出改变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

【讨论】：

非常感谢它就像一个魅力......但是你能解释一下代码吗？我可以用“慢”或“快”或毫秒来操纵淡入淡出缓动和动画时间吗？
是的，您可以在 pippo.fadeOut('slow',function 或 pippo.html(array[i]).fadeIn('fast',function() 上添加慢速、快速或毫秒数

【解决方案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]);
}

【讨论】：