jQuery Basic Animation Logic

Question

I'm working on a feature for a web site with these basic steps:
1) Animate in the first image
2) Animate in the caption
3) Show both for a specified amount of time
4) Animate out the caption
5) Animate out the image
6) Move on to the next list item (unless it's the last, then loop)

I've written a function to show the image & caption, the timer to show until, and the function to animate them out. I'm currently fighting with how to go about step #6 above.

Basic HTML structure is:

<ul>
    <li class="current">
        <img src="my_pic.jpg" />
        <div class="caption">This is my caption text.</div>
    </li>
    <li>
        <img src="my_pic.jpg" />
        <div class="caption">This is my caption text.</div>
    </li>
    <li>
        <img src="my_pic.jpg" />
        <div class="caption">This is my caption text.</div>
    </li>
</ul>

My Basic (informal syntax) Script is:

showCurrentListItem(); //Call the function that animates in the image & caption

setTimeout(function () { //Add a timer (Show for 5 seconds)
    hideCurrentListItem() //After 5 seconds, animate out the current list item
}, 5000)

I guess my main question is; how can I go about showing, then hiding the next list item after this first one completes? (& then resetting so that it loops once the last list item is reached)

Answer 1

why don't you try it out with loop, something like :

var i = 0;
function ShowItem(){ // i be the index of image
// Write your code to animate
// image and caption
setTimeout(function(){ HideListItem(); }, 5000);
}

function HideItem(){
// Write Logic to Hide
// Image and Caption
i++;
if(i == 3) {// or whatever is the total count
i=0;
}
ShowItem();
}

Answer 2

Why not just use jQuery.animate?

$('ul').on('click', 'li', function() {
    $('.current').hide().removeClass('current');
    $(this).addClass('current');
    $(this).animate({
        opacity: 0.25,
        height: "toggle"
    }, 5000, function() {
        $(this).hide();
    });
});