javascript - 淡入淡出间隔

Question

如何在不点击的情况下实现类似 slider 的效果？这是来自 JSFIDDLE 的示例.

从示例中，我们必须单击图像才能查看下一个内容。但我想要的是，让它淡入并等待 5 秒，然后淡出到下一个内容。

我是否需要更改此处的 javascript 中的任何内容？

$('#two, #three').hide();
$('.slide').click(function(){
    $(this).fadeOut().next().fadeIn();
});

我是新来的。请指导我。非常感谢!

Answer 1

您可以使用链式事件在另一个事件结束时触发另一个事件，并使用 delay() 函数让事件“等待”发生:

$('#two, #three').hide();

$(document).ready(function() {
    $("#one").delay(10000).fadeOut("slow", function(){ // first animation delayed 10 secs
        $(this).next().fadeIn("slow", function(){
            $(this).delay(2500).fadeOut("slow", function(){
                $(this).next().fadeIn("slow");
            });          
        });
    });
});

#pic {
    width:460px;
    height:300px;
    margin:0 20px 0 20px;
    overflow:hidden;
}
.slide {
    width:460px;
    height:300px;
}
#one {
    background:url('http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png') no-repeat;
}
#two {
    background:url('http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/256/Yahoo-Messenger-icon.png') no-repeat;
}
#three {
    background:url('http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/256/3D-Studio-Max-icon.png') no-repeat;
}
#one {
    position: absolute;
    margin-top:50px;
}
#one .tooltip-content {
    display: none;
    position: absolute;
    bottom:100%;
    left:0;
    right: 5%;
    background-color:aquamarine;
    padding:;
}
#one:hover .tooltip-content {
    display: block;
}
#one .tooltip-content2 {
    display: none;
    position: absolute;
    top:100%;
    left:0;
    right: 5%;
    background-color:bisque;
    padding:;
}
#one:hover .tooltip-content2 {
    display: block;
}
#two {
    position: absolute;
    margin-top:50px;
}
#two .tooltip-content {
    display: none;
    position: absolute;
    bottom:100%;
    left:0;
    right: 5%;
    background-color:goldenrod;
    padding:;
}
#two:hover .tooltip-content {
    display: block;
}
#two .tooltip-content2 {
    display: none;
    position: absolute;
    top:100%;
    left:0;
    right: 5%;
    background-color:coral;
    padding:;
}
#two:hover .tooltip-content2 {
    display: block;
}
#three {
    position: absolute;
    margin-top:50px;
}
#three .tooltip-content {
    display: none;
    position: absolute;
    bottom:100%;
    left:0;
    right: 5%;
    background-color:darksalmon;
    padding:;
}
#three:hover .tooltip-content {
    display: block;
}
#three .tooltip-content2 {
    display: none;
    position: absolute;
    top:100%;
    left:0;
    right: 5%;
    background-color:darkseagreen;
    padding:;
}
#three:hover .tooltip-content2 {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="pic">
    <div id="one" class="slide">
        <div class="tooltip-content">
            <p>Here is some content for the tooltip</p>
        </div>
        <div class="tooltip-content2">
            <p>Lorem ipsum</p>
        </div>
    </div>
    <div id="two" class="slide">
        <div class="tooltip-content">
            <p>Here is some content for the tooltip</p>
        </div>
        <div class="tooltip-content2">
            <p>Lorem ipsum</p>
        </div>
    </div>
    <div id="three" class="slide">
        <div class="tooltip-content">
            <p>Here is some content for the tooltip</p>
        </div>
        <div class="tooltip-content2">
            <p>Lorem ipsum</p>
        </div>
    </div>
</div>

编辑

您可以将 delay() 函数的参数调整为您喜欢的任意毫秒数。

EDIT2

要使函数在页面加载后立即运行，您可以使用 JQuery 的 $(document).ready()。

FIDDLE