Horizontal ticker gets cut off prematurely?

Question

I've implemented a horizontal ticker, however, it should cycle through the <li> 's and never stop. It seems I have an error somewhere and at the end of the <li> 's it leaves a black space on the right which shouldn't happen , it should continue the loop. What have I done wrong here which is making this not work infinitely as it should?

http://jsfiddle.net/UzrM5/

/* Horizontal Ticker */
jQuery.fn.racScroll = function(settings) {
        settings = jQuery.extend({
        travelocity: 0.07
        }, settings);       
        return this.each(function(){
                var $strip = jQuery(this);
                $strip.addClass("newsticker")
                var stripWidth = 1;
                $strip.find("li").each(function(i){
                stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
                });
                var $mask = $strip.wrap("<div class='mask'></div>");
                var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");                             
                var containerWidth = $strip.parent().parent().width();  //a.k.a. 'mask' width   
                $strip.width(stripWidth);           
                var totalTravel = stripWidth+containerWidth;
                var defTiming = totalTravel/settings.travelocity;   // thanks to Scott Waye     
                function scrollnews(spazio, tempo){
                $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
                }
                scrollnews(totalTravel, defTiming);             
                $strip.hover(function(){
                jQuery(this).stop();
                },
                function(){
                var offset = jQuery(this).offset();
                var residualSpace = offset.left + stripWidth;
                var residualTime = residualSpace/settings.travelocity;
                scrollnews(residualSpace, residualTime);
                });         
        }); 
};

    jQuery(function ($) {
    $("ul#feed").racScroll({travelocity: 0.05});
    }); 

Answer 1

这是由以下CSS引起的：

  margin-right: -15px;

Answer 2

ul#feed li:last-of-type { margin-right:0; } ul#feed li:last-of-type { margin-right:0; } should fix your problem.

Answer 3

Here's a working solution. I suggest adding the following:

ul#feed li:last-child {
  padding-right: 30px;
}

What this does is push the last list element by 30px, to overcome the -15px margin in "ul#feed li". Adding just 15px alone, fixes the problem as well, you're left with text from the last list element touching the end of the list.

Link to the corrected JSFiddel