Question

I have a set up of the following HTML

<div class="container">
    <div class="box">Content</div>
    <div class="box">Content</div>
    <div class="box">Content</div>
    <div class="box">Content</div>
    <div class="box">Content</div>
</div>

I would like to show one .box div at a time within the .container div. Fading in/out or sliding in/out would be preferred. Once the last .box div is shown it should fade to the first again. The number of .box divs could possibly vary. Sometimes there could be 2 and at others there could be 5. Also a slight delay of something like 3-4 seconds would be awesome.

I think this should be pretty straight forward with jQuery but I haven’t yet found the solution I am looking for. Also I cannot use any plug-ins. Thanks in advance for any help.

Answer 1

I think that you’ll want to use the jQuery Cycle plug-in. It has many different transition types (including fading and sliding) and allows a time-delay of your choosing between transitions.

The demos on the site are all done with images, but you can have any sort of html content you like, and each part will be turned into a “slide.”

EDIT

I just saw that you can’t use any plug-ins, but I’ll leave this up here for others who don’t have that restriction.

EDIT 2

Barring the use of a plug-in, try something like the following:

$(function() {
    $('.container .box').css('position', 'absolute').filter(':not(:first)').hide();
    $('.container .box:first').addClass('shown');

    setInterval(transition, 4000);
});

function transition() {
    var current = $('.shown');
    var next = null;
    if (current.next('.box').size() == 0) {
        next = $('.container .box:first');
    } else {
        next = current.next('.box');
    }
    current.fadeOut().removeClass('shown');
    next.fadeIn().addClass('shown');
}

Here’s a live demo of that: http://jsfiddle.net/FvKAe/