淡入淡出间隔 Javascript

Question

我如何让这个 fiddle 在不打开 hover/click 的情况下从第一个内容 (mario) 切换到下一个内容 (笑脸)？我希望它在 5 秒后自动更改。也是从第二个内容到第三个内容和第四个内容。

这是来自 JSFIDDLE 的示例。我认为也许应该在此处更改编码：

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

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

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

Answer 1

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

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

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

使用setTimeout()函数

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

Fiddle 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);
}

已更新 fiddle。 NEW FIDDLE UPDATED AS PER COMMENT

Answer 4

您的 hey() 正在显示第 3 个 text.Add 另一个 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 5

我认为你必须使用 setInterval()

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

看这个 Link setTimeout 和 setInterval

淡入淡出间隔 Javascript

Fade In & Out Interval Javascript

html

javascript

fadeout

fadein

css-transitions