淡入淡出间隔

Question

如何在不点击的情况下实现类似滑块的效果？这是来自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

Answer 2

试试这个代码。我希望这会有所帮助....

setInterval(function() {
  $("#fade").fadeToggle();
}, 1500);

<div id="fade" style="background-color:#66FFFF;width:500px;
height:100px;text-align:center;">
  This text should fade in and out
</div>

这是 jsfiddle 工作链接。检查它：- http://jsfiddle.net/emgee/4QJeG/7/

Answer 3

您需要使用 JS 的 setInterval 方法每 5 秒调用一次更改：

setInterval(function(){
    $('.slide').fadeOut().next().fadeIn();
}, 5000);

更新的 JSFIDDLE：http://jsfiddle.net/ghorg12110/e40ct6sn/2/

Answer 4

像这样将 javascript 代码放在 5 秒的 setinterval 函数中 下面是一个 jsfiddle 工作示例http://jsfiddle.net/elviz/e40ct6sn/8/

           $('#two, #three').hide();
              setInterval(function(){ $('.slide').fadeOut().next().fadeIn(); 
               $('.tooltip-content, .tooltip-content2').show();
            }, 5000);