Continuous scroll on hover [performance] using JQuery.

<style type="text/css">

.scroll{
   margin-top:20px;
   background:#444;
   height:20px;
}

#content{
   width:0px;
   padding:10px;
   margin-left:0px;
   background:red;
   border-radius:100px;
}
.scroll:hover #content{
   background:lightgreen;
}

</style>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<div class="scroll">
    <div id="content"></div>
</div>

<script type="text/javascript">

$(function(){
function loop(){
    $('#content').stop().animate({marginLeft:'+=20'}, 1000, 'linear', loop);
}

function stop(){
   $('#content').stop();
}

$(".scroll").hover(function () {
  loop();
},function () {
  stop();
});
});

</script>

Output :)

1)

2)

3)