1

内に含まれる単語のリストがあり<div>、<div>オーバーフローが非表示に設定されているため、一度に 1 つのリスト項目のみが表示されます。.slideUp()関数を使用せずに、各リスト項目を 1 つずつ上にスライドさせたい。片方が上に移動し、もう一方が下から現れるように見せたい. また、リスト項目をループさせたいです。

ここに私の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 コードを作成する助けを得ることができますか?

4

1 に答える 1

6

以下は、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>
于 2013-02-13T18:16:17.550 に答える