淡出＆amp; Out Interval Javascript

Question

如何在没有悬停/点击的情况下将这个小提琴从第一个内容（马里奥）改为下一个内容（笑脸）？我希望它在5秒后自动更改。还从第二内容到第三内容和第四内容。

以下是JSFIDDLE的示例。我想也许编码应该在这里改变：

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

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

我是新手。请指导我。提前谢谢了。

Answer 1

只需添加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 2

使用setTimeout()功能

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

小提琴Updated 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);
}

更新了小提琴。 NEW FIDDLE UPDATED AS PER COMMENT

Answer 3

你的嘿（）显示第三个文字。添加另一个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);

的

See this Link what is difference between setTimeout and setInterval