marquee style without gap

index.html

<ul class="slideContainer" id="money_start">
        <li class="slideItem" >
                EUR
        </li>
        <li class="slideItem">
                USD
        </li>
        <li class="slideItem">
                JPY
        </li>
        <li class="slideItem">
                CNY
        </li>
        <li class="slideItem">
                VD
        </li>
        <li class="slideItem">
                GBP
        </li>
        <li class="slideItem">
                AUD
        </li>
        <li class="slideItem">
                CAD
        </li>
        <li class="slideItem">
                CHF
        </li>
        <li class="slideItem">
                XAU
        </li>
</ul>

slide.js

// demo http://jsfiddle.net/roine/TCJT4/

var currencyPairWidth = $('.slideItem').width();
var speed = 3000;
(function currencySlide(){
        $(".slideContainer").animate({marginLeft:-currencyPairWidth}, speed, 'linear', function(){
                $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
        });
        // check https://gist.github.com/paulirish/1579671 for a polyfill of requestAnimationFrame
        requestAnimationFrame(currencySlide);
}())

style.css

.slider{
    width:100%;
    overflow:hidden;
    position:relative;
    margin:0;
}
.edge{
    left:0;
    right:0;
    top:0;
    bottom:0;
    position:absolute;
    height:100%;
    display:block;
}
.edge:before{
    content:'';
    position:absolute;
    left:0;
    background:-webkit-linear-gradient(left, white 10%, rgba(0,0,0,0) 100%);
    width:25%;
    height:100%;
}
.edge:after{
    content:'';
    position:absolute;
    right:0;
    background:-webkit-linear-gradient(right, white 10%, rgba(0,0,0,0) 100%);
    width:25%;
    height:100%;
}
ul{
    background:#ddd;
    overflow:hidden;
    width:1000%;
    margin:0;
}
li{
    list-style:none;
    display:inline-block;
    padding:0 50px;
}