JSFiddle - React, Tailwind, and code Playground
HTML
<div id="partner">
<div id="slide">
Le club canin de Rédéné vous souhaitent une bonne année 2014
</div>
</div>
CSS
#partner {
width:545px;
height:190px;
margin:20px;
background-color:#fff;
border:1px solid black;
overflow:hidden;
position:relative;
}
#slide {
width:600px;
height:170px;
margin-top:10px;
background-color:#FF9900;
position:absolute;
overflow:hidden;
left:0;
}
JavaScript
(function($) {
function mySlide(pos) {
var x = $('#slide').width() - $('#partner').width();
var t = 1800 * ( (pos + x) / x);
$("#slide")
.css('left', pos)
.animate(
{'left': -x},
t,
'linear',
function() {
mySlide(0);
}
);
}
$("#partner").hover(
function() {
$('#slide').stop();
},
function() {
mySlide( $('#slide').position().left );
}
);
mySlide(0);
})(jQuery);