marquee.css

.marquee {
  width: 80%;
  overflow: hidden;
}
.message {
  white-space: nowrap;
  position: relative;
}

marquee.js

function model () {
  this.someText = "Suspendisse at orci ac metus fermentum cursus. Donec eleifend dapibus tellus, in vestibulum nunc cursus nec. ";
  
}

ko.applyBindings(new model());


function marquee (message) {
  
  var $message = $(message),
      parentWidth = $message.parent().width(),
      width = ($message[0].scrollWidth) + (parentWidth / 2),
      time = width * 10, 
      _timer;
  
  function reset () {
      parentWidth = $message.parent().width();
      width = ($message[0].scrollWidth) + (parentWidth / 2);
      time = width * 10;
  }
  
  function run () {
    console.log('run');
    console.log(parentWidth);
      $message.css('left', parentWidth);
    
      $message.animate({
        left:  -(width) + 'px'
      }, time, 'linear', function () {
        console.log('done');
      });
  }
  
  function stop () {
    console.log('stop');
    $message.finish();
    clearInterval(_timer);
  }
  
  return {
    run: function () {
      run();
      _timer = setInterval(function  () {
        console.log('...');
        run();
      }, time + 200);
    },
    stop: stop,
    reset: reset
  };
  
}


var m = marquee($('.message'));
m.run();
console.log(m);



$('button').click(function () {
  m.stop();
});