遇到問題與jQuery的。接下來（）方法

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

我覺得我有東西做你所描述的。

View the jsFiddle

這裏是JS評論，記住了一些調整中的CSS製作，並加入內包裝紙股利。讓我知道，如果這不是你正在尋找或如果你有任何問題！

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

而且，要看到什麼是真正回事，取出溢：從div.ticker

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

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

Answer 4

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(); 
});