Fade In & Out Interval

Question

How can I achieve a sort of like slider without clicking? Here is a sample from JSFIDDLE.

From the sample, we have to click onto image to view the next content. But what I want is, for it to fade in and wait 5 seconds, and then fade out to next content.

Do I have to change anything from the javascript here?:

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

I am new in this. Please guide me. Many thanks in advance!

Answer 1

You can use chained events to trigger one once the other is over and the delay() function to make the events "wait" to happen:

$('#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>

EDIT

You can adjust the parameter of the delay() function to any amount of milliseconds you like.

EDIT2

To make a function run as soon as the page loads, you can use JQuery's $(document).ready().

FIDDLE