jQuery淡入淡出功能不重复

我是一个试图学习它的jquerynoob，但我遇到了一个问题。我不想让我的div在彼此之间消失，就像1-2-1-2-1-2。。。 我希望它重复，但它只做一个，然后它停止。 代码：

函数fadeInOut（）{
$（'#text-2'）。延迟（3000）。淡出（750，函数（）{
$（'#text-5'）.fadeIn（750，function（）{
$（'#text-5'）。延迟（3000）。淡出（750，函数（）{
$（'text-2'）。法代因（750）；
});
});
});
}
$（文档）.ready（函数（）{
fadeInOut（）；
});
#ESCM{
宽度：400px；
浮动：对；
背景图像：线性梯度（左下，rgb（251,86,91）0%，rgb（14,34,40）68%，rgb（0,66,64）77%）；
背景图像：-o-线性梯度（左下，rgb（251,86,91）0%，rgb（14,34,40）68%，rgb（0,66,64）77%）；
背景图像：-moz线性梯度（左下角，rgb（251,86,91）0%，rgb（14,34,40）68%，rgb（0,66,64）77%）；
背景图片：-webkit线性渐变（左下角，rgb（251,86,91）0%，rgb（14,34,40）68%，rgb（0,66,64）77%）；
背景图像：-ms线性梯度（左下角，rgb（251,86,91）0%，rgb（14,34,40）68%，rgb（0,66,64）77%）；
背景图像：-webkit渐变(
线性的
左下角，
右上角，
色阻（0，rgb（251,86,91）），
色差（0.68，rgb（14,34,40）），
彩色光圈（0.77，rgb（0,66,64））
);
填充：20px；
盒影：0 1px 8px rgba（0,0,0,0.7）；
边界半径：5px；
moz边界半径：5px；
o-边界半径：5px；
身高：621px；
}
#文本-5{
显示：无；
}
html{
颜色：白色；
字体系列：无衬线；
}
氢{
字号：26px；
}
}
德塔夫兰德酒店
测试1
测试2

---

完成后，您需要再次调用

fadeInOut

函数。将您的功能更改为：

function fadeInOut() {
    $('#text-2').delay(3000).fadeOut(750, function () {
        $('#text-5').fadeIn(750, function () {
            $('#text-5').delay(3000).fadeOut(750, function () {
                $('#text-2').fadeIn(750, fadeInOut);
            });
        });
    });
}
fadeInOut();

试试这个-

$('#text-2').delay(3000).fadeOut(750, function() {
       $('#text-5').fadeIn(750, function() {
         $('#text-5').delay(3000).fadeOut(750, function() {
           $('#text-2').fadeIn(750,function() {   
              fadeInOut();
           });
         });
       });
});

简明扼要：-

使用从数组中获取第一项，将其移除并推到末尾。然后在回拨中使用

fadeInOut

这里我只更新了数组，没有代码重复

---

您应该尝试设置间隔：

$(document).ready(function(){
    setInterval(function() {
        fadeInOut();}, 1000);
});

---

如果你认为我的回答对你有帮助，请考虑投票吧。如果它解决了您的问题，您也可以将其标记为已接受的答案。请查看我的答案，您可以将其全部简化并使其更易于维护。。

var ids=["text-2","text-5"];
function fadeInOut () {
    var id = ids.shift(); //This will ensure cycle to happen. 
     //no matter how many divs you add. you just need to add it in the array ids.

    ids.push(id);
    var idin = ids[0];
    $('#' + id).delay(1000).fadeOut(750, function() {

            $('#' + idin).fadeIn(750, fadeInOut);
  });
 }
$(document).ready(function(){
    fadeInOut();
});

var ids=["text-2","text-5","text-6","text-7","text-8","text-9"];
function fadeInOut () {
    var id = ids.shift();
    ids.push(id);
    var idin = ids[0];
    $('#' + id).delay(1000).fadeOut(750, function() {

            $('#' + idin).fadeIn(750, fadeInOut);
  });
 }
$(document).ready(function(){
    fadeInOut();
});

$(document).ready(function(){
    setInterval(function() {
        fadeInOut();}, 1000);
});