jQuery基本动画逻辑

我正在使用以下基本步骤为网站开发一项功能：
1） 在第一幅图像中设置动画
2） 在标题中设置动画
3） 在指定的时间内同时显示这两个选项
4） 制作标题动画
5） 设置图像的动画
6） 转到下一个列表项（除非是最后一个，然后循环）

我已经编写了一个函数来显示图像和标题，计时器来显示直到，还有一个函数来设置它们的动画。我目前正在为如何进行上述第6步而斗争

基本HTML结构是：

<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>

---

我想我的主要问题是；如何在第一个列表项完成后显示，然后隐藏下一个列表项？（&然后重置，以便在到达最后一个列表项时循环）

为什么不尝试使用循环，类似于：

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();
}

为什么不直接使用

---

在本例中，看起来“i”被传递到HideItem（）函数中。这需要我循环遍历列表项并将它们分配到一个数组中，以便使用“i”将它们作为目标，还是我过于复杂了？好吧，你不需要传递i，我只需更改代码。此外，通过$（“li”）可以得到任何指数的li。eq（i）

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();
}

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