JSFiddle - React, Tailwind, and code Playground

by tredio

HTML

<div class="aniGoogle"></div>

CSS

.aniGoogle{ width:24px; height:15px; background:url(http://www.google.com/images/experiments/p1/p1sprite.png) 0 0 no-repeat; cursor:pointer;

JavaScript

$(function(){
    var div = $('.aniGoogle'),time,animar = function(){
        var back_x = parseInt(div.css('background-position-x')) -25; 
        console.log(back_x )
        if(back_x > -450){
            clearTimeout(time);
            time = setTimeout(function(){
                div.css({'background-position':back_x+'px 0'},'fast')
                animar();
             }, 20);    
        }
       
    };
    
    div.hover(function(){
        animar();
    },function(){
        clearTimeout(time);
        div.css('background-position-x',0);
    });
});