Simple fadein fadeout with span caption
I'm trying to get this simple slider to work.
All I want it to do is fade the LI in, then fade the LI SPAN in.
Then pause 3 seconds.
Then fade the .current LI SPAN out, then fade the .current LI out.
Then fade in the next LI, then next LI SPAN etc. and continue the loop.
My code isn't working. It only seems to loop through the first LI.
- <script type="text/javascript">
function showslide ()
{
$('.slider ul li.current').fadeIn(1000, function () { $('.slider ul li.current span').fadeIn(1000); });
setTimeout(hideslide, 3000);
}
function hideslide ()
{
var next = ($('.slider ul li.current').next().length) ? $('.slider ul li.current').next() : $('.slider ul li:first');
$('.slider ul li.current span').fadeOut(1000, function () { $('.slider ul li.current').fadeOut(1000).removeClass('current'); });
next.addClass('current');
setTimeout(showslide, 3000);
}
$(document).ready(function() {
showslide();
});
</script>