Question

我打算在我的项目shown on jsfiddle here中使用这个简单的自动收报机概念。

这个自动收报机没问题，但我打算一次在一个页面上使用一堆（这个）代码，因为它们将由PHP自动生成。

一页上可以同时有三个代码，一直到20个，当然内容不同。

我怎样才能让他们全部工作，“移动”作为第一个，使用特色HTML？

ps：暂停悬停添加将是一个加号，thx！

JS

function tick(){
    $('#ticker li:first').slideUp( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);

HTML

<div><ul class="ticker" id="ticker">
    <li>
        One.
    </li>
    <li>
        Two.
    </li>
    </ul></div>

<div><ul class="ticker" id="ticker1">
    <li>
        3.
    </li>
    <li>
        4.
    </li>
    </ul></div>

<div><ul class="ticker" id="ticker2">
    <li>
        Five.
    </li>
    <li>
        Six.
    </li>
    </ul></div>

CSS

.ticker {
    height: 40px;
    overflow: hidden;
    background:#c1c1c1;
}
.ticker li {
    height: 40px;
}

Answer 1

您只定位集合中的第一个li，整个集合。你需要遍历每个自动收报机，然后在每个li:first上进行动画制作。将其附加到closest()自动收报机，您就可以了：

function tick(){
    $('.ticker').each(function(){
        $(this).find('li:first').slideUp(function () {
            $ticker = $(this).closest('.ticker');
            $(this).appendTo($ticker).slideDown();
        });
    });
}
setInterval(tick, 5000);

JSFiddle

Answer 2

我喜欢oGeez比我自己更好的回答（这应该是评论，而不是像我这样编辑我的答案，但我还没有能力评论......）。

但是，我会指出，当鼠标悬停在它们之上时，你应该能够添加暂停元素的功能，使用jquery hover（）方法将一个类附加到被鼠标悬停的元素上。 http://api.jquery.com/hover/从那里，您只需在待更新的代码列表中不包含已暂停类的代码。

function tick(){
    $('.ticker').not(".paused").each(function(){
        $(this).find('li:first').slideUp(function () {
            $ticker = $(this).closest('.ticker');
            $(this).appendTo($ticker).slideDown();
        });
    });
}
setInterval(tick, 5000);

$(".ticker").hover(     
    (function () {          
        $(this).addClass("paused")      
    }),      
    (function () {          
        $(this).removeClass("paused")      
    }) 
);

我更新了你的jsfiddle的分支，以反映oGeez的答案，能够通过鼠标悬停在一个自动收报机上暂停。 http://jsfiddle.net/4MgZv/3/

一页上有几个独立的jquery代码

2 个答案: