Question

我正在为一个网站开发一个功能，其中包含以下基本步骤：
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>

My Basic（非正式语法）脚本是：

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)

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

Answer 1

为什么不用循环来试试呢，比如：

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

为什么不使用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();
    });
});

jQuery基本动画逻辑

2 个答案: