jQuery Marquee

I shopped around for a plugin but couldn't find what i was looking for so i knocked one up. welcome to the year 2000

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.12.0/build/cssreset/cssreset-min.css">
<div class="marquee">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
        <li>Ten</li>
        <li>Eleven</li>
        <li>Twelve</li>
        <li>Thirteen</li>
        <li>Fourteen</li>
        <li>Fifteen</li>
        <li>Sixteen</li>
        <li>Seventeen</li>
        <li>Eighteen</li>
        <li>Nineteen</li>
        <li>Twenty</li>
    </ul>
</div>

CSS

body{
    text-align: center;
    padding: 20px;
}

.marquee{
    margin: auto;
    position: relative;
    overflow: hidden;
    background: #eee;
    height: 20px;
    max-width: 550px;
}

.marquee ul li{
    position: absolute;
    cursor:pointer;
    text-decoration:underline;
}

JavaScript

var off = 10,
        l = off,
        $As = $('.marquee li'), 
        speed = 2,
        stack = [],
        pause = false;

    $.each($As, function(){
      var W = $(this).css({
        left: l
      }).width()+off;
      l+=W; 
      stack.push($(this));
    });

    var tick = setInterval(function(){
      if(!pause){
        $.each($As, function(){
          var ml = parseFloat($(this).css('left'))-speed;
          $(this).css({
            left: ml
          });
          if((ml+$(this).width()) < 0){
            var $first = stack.shift(),
                $last = stack[stack.length-1];
            $(this).css({
              left: (parseFloat($last.css('left'))+parseFloat($last.width()))+off
            });
            stack.push($first);
          }
        });
      }
    }, 1000/25);

    $('.marquee').on('mouseover', function(){
      pause = true;
    }).on('mouseout', function(){
      pause = false;
    });