Question

I have a div and inside it i want to display 3 texts one at a time. Like windows 8 metro theme. I have three divs like this :

<div id='a'> Text 1</div>
<div id='b'> Text 2</div>
<div id='c'> Text 3</div>

and another main div which wraps all these. I want to display one div at a time inside the wrapper without any occurrence of the event from bottom to top and the new one slides over the other.

PS: i have seen how to do it using image and css. But i want to display the text through html not image, is there any way of doing this using jquery? Thank you.

Answer 1

A basic example: http://jsfiddle.net/rNcNA/

HTML:

<div id="container">
    <div class="content">Some content here</div>
    <div class="content hidden">Other content here</div>
    <div class="content hidden">Yet more content here</div>
</div>​

JavaScript:

$(document).ready(function() {
    var interval = 2000; // 2 seconds
    var contents = $('#container').find('.content');
    var index = 0;
    var display = function(index) {
        $('.content:visible').fadeOut('fast', function() { $(contents[index]).fadeIn(); });
        index += 1;
        if (index > contents.length-1) {
            index = 0;
        }
        setTimeout(function() { display(index) }, interval);
    }

    display(index);
});​