I'm trying to think of a way to achieve a slideshow effect for some text, essentialy it starts automatically and displays first h4 element than fades it away and fades in next one, and so on for all h4 elements, once it reaches last one it should repeat again.

Sample markup for the test is

<div id="slideshow">
    <h4 class="slideshow-element">Test 1</h4>
    <h4 class="slideshow-element">Test 2</h4>
    <h4 class="slideshow-element">Test 3</h4>
    <h4 class="slideshow-element">Test 4</h4>
</div>

where h4 are basically overlaid on each other and initially hidden. It would also be nice to know how to add more css properties besides fade in and out to it to acheive various effect. I know there are plugins that do this, but I want a specific lightweight solution that would work on any number of h4 elements.

So far I figured out a nit to make it loop where I define a function that is responsible for adding various effects and once finished it calls itself again. I guess I can use classes to add to h4 elements to apply styles to them and maybe transitions?

I'm trying to think of a way to achieve a slideshow effect for some text, essentialy it starts automatically and displays first h4 element than fades it away and fades in next one, and so on for all h4 elements, once it reaches last one it should repeat again.

Sample markup for the test is

<div id="slideshow">
    <h4 class="slideshow-element">Test 1</h4>
    <h4 class="slideshow-element">Test 2</h4>
    <h4 class="slideshow-element">Test 3</h4>
    <h4 class="slideshow-element">Test 4</h4>
</div>

where h4 are basically overlaid on each other and initially hidden. It would also be nice to know how to add more css properties besides fade in and out to it to acheive various effect. I know there are plugins that do this, but I want a specific lightweight solution that would work on any number of h4 elements.

So far I figured out a nit to make it loop where I define a function that is responsible for adding various effects and once finished it calls itself again. I guess I can use classes to add to h4 elements to apply styles to them and maybe transitions?

• javascript
• jquery
• css

1 Answer 1

Here's a JSFiddle

Here's the JQuery:

jQuery(document).ready(function(){ 
    $(function(){
        $('#slideshow h4:gt(0)').hide();
        setInterval(function(){
          $('#slideshow :first-child').fadeOut(2000)
             .next('h4').fadeIn(2000)
             .end().appendTo('#slideshow');}, 
          2000);
    });
});

Pretty much what it does, is fades out the first child of slideshow, fades in the next child and then appends the first child to the end of the series of h4's