如何使這個連續的垂直滾動？ （jquery的）

Question

參見本頁：

http://www.laurensbeerten.be/Frames/FrameE.html

第一個問題是，有一個「hickup」在動畫之後一秒鐘左右。

第二個問題是，一旦所有圖像都被循環，它就會立即再次從頂部開始，而不是連續的。有什麼方法可以改變它嗎？

我想我需要以某種方式克隆一組圖片，並附上..

代碼：

$(function() { 
    var ticker = $('#ticker'); 
    function animator(currentItem, first) {        
    if (first) { 
     distance = 85; 
    } else { 
     distance = currentItem.outerHeight(); 
    } 
    duration = (distance + parseInt(currentItem.css("marginTop")))/0.05; 
    if (isNaN(duration)) { 
     duration = 1200; 
    } 
    currentItem.animate({ marginTop: -distance}, duration, "linear", function() { 
     currentItem.appendTo(currentItem.parent()).css("marginTop", 0); 
     animator(currentItem.parent().children(":first")); 
    }); 
    }; 
    animator(ticker.children(":first"), true); 
    ticker.mouseenter(function() { 
    ticker.children().stop(); 
    }); 
    ticker.mouseleave(function() { 
    animator(ticker.children(":first")); 
    }); 
}); 

Answer 1

我有兩個JS提琴的爲您服務。

第一次修復您的代碼http://jsfiddle.net/VCBXz/12/。第一個問題是你需要操縱容器的邊距而不是當前的項目。其次，您需要分離並重新附加DOM中的當前項目，以便更新列表。

第二個小提琴使用CSS3 http://jsfiddle.net/ca7Ef/4/。這樣就沒有涉及的代碼。瀏覽器支持可能不如jquery，但它是需要考慮的事情。

這裏是更新的JavaScript。請注意，我將您的內部p標記更改爲div。

var ticker = $('#ticker'); 
var container = $('#ticker > div'); 
var spacing = ticker.outerHeight() - ticker.height(); 

function animator(currentItem) { 
    var distance = currentItem.outerHeight() + spacing; 
    var currentTop = parseInt(container.css('margin-top'), 10); 
    var duration = (distance + currentTop)/0.05; 

    container.animate({ marginTop: -distance}, duration, "linear", function() { 
     var parent = currentItem.parent(); 

     currentItem.detach(); 
     parent.css("marginTop", 5); 

     parent.append(currentItem); 
     animator(parent.children(":first")); 
    }); 
}; 


animator(container.children(":first")); 
ticker.mouseenter(function() { 
    container.stop(); 
}); 

ticker.mouseleave(function() { 
    animator(container.children(":first")); 
});​