通过列表项动画循环答案

【问题标题】：Animate cycle through list items通过列表项动画循环
【发布时间】：2013-02-13 18:09:36
【问题描述】：

我有一个包含在<div> 中的单词列表，<div> 溢出设置为隐藏，因此一次只显示一个列表项。我希望每个列表项一个一个地向上滑动，但不使用.slideUp() 函数。我希望它看起来像一个从顶部移开，另一个从底部出现。我还希望列表项循环。

这是我的 HTML：

<div class="band_ticker">
        <ul id="slide">
            <li><h2 class="band">BAND</h2></li>
            <li><h2 class="band">PARTY BAND</h2></li>
            <li><h2 class="band">COPORATE EVENTS</h2></li>
            <li><h2 class="band">WEDDINGS</h2></li>
            <li><h2 class="band">FUNCTION BAND</h2></li>
            </ul>
    </div>

我是否可以帮助我编写 jQuery 代码以通过向上动画每个项目来循环这些代码？

【问题讨论】：

在堆栈溢出时，我们不会为您编写代码。我们将帮助您找到一些插件，但可以开始使用。然后，在您编写了一些代码并遇到问题后，我们会针对这些细节提供帮助。这个问题太模糊了，要求我们给你写代码。
我对一些额外的功能有同样的问题，我想用点击功能滚动顶部和底部，有什么办法吗？如果您可以提供 jsfiddle 示例，应该会更有帮助。

标签： jquery list jquery-animate ticker

【解决方案1】：

下面是一些代码，最初来自workshop.rs：

JS：

function tick(){
    $('#ticker li:first').animate({'opacity':0}, 200, function () {
    $(this).appendTo($('#ticker')).css('opacity', 1); });
}
setInterval(function(){ tick () }, 4000);

HTML：

<ul id="ticker">
    <li>
        <a href="http://workshop.rs/2009/12/jqbargraph-jquery-graph-plugin/">jqBarGraph</a> is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked.
    </li>
    <li>
        Learn how to create <a href="http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/">image gallery in 4 lines of Jquery</a>
    </li>
    <li>
        <a href="http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects">jqFancyTransitions</a> is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
    </li>
    <li>
        <a href="http://workshop.rs/2010/02/moobargraph-ajax-graph-for-mootools/">mooBarGraph</a> is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph.
    </li>
</ul>

【讨论】：

这正是我所追求的。感谢您的帮助
我对一些额外的功能有同样的问题，我想用点击功能滚动顶部和底部，有什么办法吗？如果您可以提供 jsfiddle 示例，应该会更有帮助。
@Anup，你最好提出一个新问题，而不是评论一个旧问题。回过头来参考这个问题，帮助那些愿意回答的人知道你来自哪里。
粘贴一些代码真的很有帮助（我从链接的标题中假设它确实是 4 行）以防链接不再有效。
@UpHelix 你的链接失效了。