-6

I'm pretty new to JQuery, I've just about grasped the concept of HTML/CSS, now I'm ready for a bit more advanced code and I've seen some pretty awesome things done in JQuery!

SO I've got this div with a class called 'contnet', multiple in one section, however I only want one to be displayed at a singular time, fading in and out from each other.

I know there are .fadeIn and .fadeOut functions, however I do not know how to loop through them on a cycle.

Thanks!

user3702991
  • 3
  • 2
  • Mere trying doesn't help you in future, even though you get answers from SO. – Karthik Chintala Jun 03 '14 at 12:22
  • 1
    Hi new user.Welcome to stackoverflow please check http://stackoverflow.com/tour and http://stackoverflow.com/help and http://stackoverflow.com/help/on-topic to know how to use stackoverflow better – Sina R. Jun 03 '14 at 12:23
  • Sorry guys, I have been trying, I'm just new to all this and figured that this might just be a good place to start. I'll have a look through your links to better myself in future :) – user3702991 Jun 03 '14 at 12:25

1 Answers1

2

Just made the JSFiddle for you

If my understanding is correct, this should do the job! Although I'm just using images in my divs, you can put any content you want in there.

HTML

<div class="imgloop">
    <img src="http://hq.squidoo.com/files/2013/01/draft_lens14637921_1287867138penguin_posters.png"/>
</div>
<div class="imgloop">
    <img src="http://www.openlettersmonthly.com/likefire/wp-content/uploads/2011/11/angry-penguin.jpg"/>
</div>

CSS

.imgloop {
    width:250px;
    height:250px;
    display:none;
}

JQuery

(function() {

    var imgloop         = $(".imgloop");
    var imgloopIndex = -1;

    function showNextimgQuote() {
        ++imgloopIndex;
        imgloop.eq(imgloopIndex % imgloop.length)
        .fadeIn(1000)
        .delay(4000)
        .fadeOut(1000, showNextimgQuote);
    }

    showNextimgQuote();

})();


        .fadeIn(1000)

Set how long it takes for the new content to fade in.

        .delay(4000)

Set how long the content is visible to your viewers.

        .fadeOut(1000, showNextimgQuote);

Set how long it takes for the content to fade out.

NOTE: These values are in miliseconds, 1000 is equal to one second.