これを連続的な垂直スクロールにする方法は？

Question

は、このページを参照してください（jqueryの）：

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

最初の問題は、かそこら秒後にアニメーションで「hickup」があるということです。

2つ目の問題は、すべての画像がループされると、連続しているのではなく、すぐに再び先頭から開始されることです。これを変更する方法はありますか？私は何とかイメージのセットのクローンを作成し、それを添付する必要があると思う

..

コード：

$(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

私はあなたのための2つのJSフィドルのを持っています。

最初にコードhttp://jsfiddle.net/VCBXz/12/が修正されました。最初の問題は、現在のアイテムではなくコンテナのマージンを操作する必要があることでした。次に、DOM内の現在のアイテムを切り離して再追加して、リストが更新されるようにする必要があります。

第2のフィドルは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")); 
});​