jsBin demo

Question

好吧，让我说我有以下标记：

<div class="ticker">
    <p>News Item One. News Item One. News Item One. News Item One.</p>
    <p>News Item Two. News Item Two. News Item Two. News Item Two.</p>
    <p>News Item Three. News Item Three. News Item Three. News Item Three.</p>
    <p>News Item Four. News Item Four. News Item Four. News Item Four.</p>
    <p>News Item Five. News Item Five. News Item Five. News Item Five.</p>
</div>

我正在尝试为它们设置动画，以便它们一个一个地出现在一个自动收报箱中，使用以下内容：

var newsItem = $('div.ticker p'),
    numberOfNewsItems = newsItem.length;
for(i=0; i < numberOfNewsItems; i++) {
    newsItem.eq(i).animate({top: '-3em'}, 1500).next('p').animate({top: '0em'}, 1500);
};

我想让这些段落动画，然后制作动画。这不符合要求，我无法弄清楚原因。有人有什么想法吗？

如果你想让jsFiddle玩：http://jsfiddle.net/joshnh/tkR7y/

Answer 1

jsBin demo

退房时，这个'暂停'暂停'。以为你可能需要它。

var newsP = $('div.ticker p'),
    newsPn = newsP.length,
    c = 0,
    i;

function loopNews(){
    i = setInterval(function(){
            newsP.eq(c%newsPn).animate({top:'-3em'},900,function(){
                $(this).appendTo('.ticker').css({top:'3em'});
            });
            newsP.eq(++c%newsPn).animate({top:0},900);
    },2200);
}
loopNews();

$('.ticker').bind('mouseenter mouseleave', function(e){
    me_ml = e.type==='mouseenter' ?  clearInterval(i) : loopNews();
});

Answer 2

试试这个：

var newsItem = $('div.ticker p');
var index = 0;
function doit(){
    if(index < newsItem.length) {
        var p = newsItem[index++];
        $(p).animate({top: '-3em'}, 1500, doit);        
    }
}
doit();

Answer 3

我认为我有一些能够完成你所描述的事情。

<强> View the jsFiddle

以下是评论的JS，请记住对CSS进行了一些调整，并添加了内部包装器div。如果这不是您要找的或者您有任何疑问，请告诉我们！

var ticker = $('div.ticker'),
    tickerInner = ticker.find('.ticker-inner'),
    tickerHeight = ticker.height(),
    tickerDelay = 3000,
    tickerSpeed = 1500,
    tickerInterval;

tickerInterval = setInterval(function(){     
    tickerInner.animate({'top' : '-='+tickerHeight}, tickerSpeed, function(){ // Animate top -= the height of the ticker
        $(this).find('p').first().appendTo(tickerInner); // Move the top, hidden p to the bottom
        tickerInner.css('top', 0); // This isn't totally necessary, I just like to keep my animation numbers low
    });
}, tickerDelay); // Call this every 3000ms

// Need to stop the ticker?
// clearInterval(tickerInterval);

编辑：使用setTimeout而不是setInterval稍微改进了代码。旧的自动收报机延迟是不准确的。的 View the jsFiddle

另外，要查看实际情况，请删除overflow：div.ticker
中的overflow：hidden

Answer 4

var newsItem = $('div.ticker p');
var index = 0;
function animateTicker(){
    if(index < newsItem.length) {
        var p = newsItem[index++];
        var prevP=$(p).prev();
        if(prevP)
        {
                 prevP.animate({top: '-3em'}, 1500);   
        }
        $(p).animate({top: '-3em'}, 1500, animateTicker);        
    }
}
animateTicker();

我希望我理解你的问题。

Live Demo

遇到jQuery的.next（）方法问题

4 个答案:

jsBin demo