jquery simple slider not working as meant too

Question

im new at javascript and i can get this slider to work but not exact to what i am after, what am i doing wrong?

Basically the slider is ment to fade in and out nicely, in mine it just shows up bluntly lol.

Here is the code

    $(function() {
    setInterval("rotateDiv()", 5000);
});

    function rotateDiv() {
    var currentDiv=$("#simlpeslider div.current");
    var nextDiv= currentDiv.next ();
    if (nextDiv.length ==0)
        nextDiv=$("#simlpeslider div:first");

    currentDiv.removeClass('current').addClass('previous');
    nextDiv.addClass('current').fadeIn('3000',function() {
        currentDiv.removeClass('previous').fadeOut('1000');});

}

The html is as follows:

<div id="simlpeslider">
                        <!-- Slide 1 -->
                        <div class="current">
                            <h6>Title 1</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p>
                        </div>
                        <!-- End Slide 1 -->
                        <!-- Slide 2 -->
                        <div>
                            <h6>iusdhfisd sdf</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p>
                        </div>
                        <!-- End Slide 2 -->
                        <!-- Slide 3 -->
                        <div>
                            <h6>eco sodalirity ltd</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p>
                        </div>
                        <!-- End Slide 3 -->
                        <!-- Slide 4 -->
                        <div>
                            <h6>asd</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p>
                        </div>
                        <!-- End Slide 4 -->
                        <!-- Slide 5 -->
                        <div>
                            <h6>ec234234234</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p>
                        </div>
                        <!-- End Slide 5 -->
                </div>

The css is:

    #simlpeslider{
    width:100%;
    float:left;
    height:150px;
    overflow:hidden;
}

#simlpeslider div {
    position:absolute;
    display:none;
    }

#simlpeslider div.previous {
    display:none;
    }
#simlpeslider div.current {
    display:block;
} 
#simlpeslider div.normal {
    display:none;
} 

Thanks

Answer 1

Simply, you need call fadeOut() before removing the class!

currentDiv.removeClass('previous').fadeOut('1000');

This will first remove your class "previous" from the element so that it will get back its default style inherited by the style for the id simpleslider (note your typo) which is display:none; so that fadeOut() will have no effect.

What you want is:

currentDiv.fadeOut('1000', function () {
   currentDiv.removeClass('previous');
});

Same goes for the fade-in. If you first add the class, which contains display:block; the element will turn visible immediately, with fadeIn having no effect.