淡入和淡出间隔 Javascript

Question

如何在不悬停/单击的情况下让这个fiddle从第一个内容（mario）更改为下一个内容（smiley face）？我希望它在5秒钟后自动更改。也从第二内容到第三内容和第四内容。

这是一个来自JSFIDDLE的示例。我想也许编码应该在这里的某个地方更改：

$('#text1').hover(function () {
    hey();
});

除此之外，有人知道为什么我的第四个内容没有显示吗？

我是新手。请引导我。非常感谢。

Answer 1

使用setTimeout()函数

setTimeout(function () {
     hey();
},5000);

Fiddle更新的Fiddle

编辑

根据您的需求，在35秒后完成

$('#text1,#text2, #text3, #text4').hide();
setTimeout(function () {
   $('#text1').show();
     hey();
},35000);
function hey() {
    setTimeout(function () {
    $("#text1").fadeOut("slow", function () {
        $(this).next().fadeIn("slow", function () {
            $(this).delay(2500).fadeOut("slow", function () {
                $(this).next().fadeIn("slow");
            });
        });
    });
    },5000);
}

更新的小提琴。根据评论更新新的FIDDLE

Answer 2

只需添加setTimeout(hey, 5000);而不是悬停处理程序：

$('#text2, #text3, #text4').hide();
setTimeout(hey, 5000);
function hey() {
    $("#text1").fadeOut("slow", function () {
        $(this).next().fadeIn("slow", function () {
            $(this).delay(2500).fadeOut("slow", function () {
                $(this).next().fadeIn("slow");
            });
        });
    });
}

Answer 3

您的hey（）最多显示第三个文本。添加另一个next（）转换。

function hey() {
    $("#text1").fadeOut("slow", function () {
        $(this).next().fadeIn("slow", function () {
            $(this).delay(2500).fadeOut("slow", function () {
                $(this).next().fadeIn("slow",function(){
                    $(this).delay(2500).fadeOut("slow", function () {
                        $(this).next().fadeIn("slow");
                    });
                });
            });
        });
    });
}

Answer 4

如果您想在5秒钟后自动更改内容，您应该使用setTimeout函数，例如：

setTimeout(function(){ alert("Hello"); }, 5000)这将在5秒后触发警报框。。。

Answer 5

我认为你必须使用setInterval（）

setInterval(function(){   hey(); }, 3000);

请参阅此链接setTimeout和setInterval