JSFiddle - React, Tailwind, and code Playground

by dkunin

HTML

<div id="pointer" class="pointer right">2</div>
<div id="pointer3" class="right"></div>
<div id="pointer2">s</div>

CSS

#pointer{
position:absolute;
    width:100px;
    height:100px;
    top:50px;
    left:50px;
    background-color:white;
    background:url('http://clients.e-learningcenter.ru/files/shower.png') no-repeat center left;


}

#pointer2{
position:absolute;
    width:20px;
    height:20px;
    background-color:red;
        top:10px;
    left:10px
}

#pointer3{
position:absolute;
    width:20px;
    height:20px;
    background-color:red;
        top:10px;
    left:150px
}
.topright {
background-position:-300px 0;
   
}
.topleft {
background-position:-200px 0;
   
}
.left {
background-position:-100px 0;
   
}

.right {
background-position:0 0;
    

}

JavaScript

p = $(".pointer")
    
    p2 = $("#pointer3")
    jumping = true;

function Jump(o){
    this.playing = false;
this.pointer = o;
        this.class = this.pointer.attr('class').split(" ")[1]
        this.init = function(){
            this.playing = true;
            that = this;
            this.interval = setInterval(function(){that.jump()},600)
                };
                
                this.stop = function(){
                   this.pointer.stop(); 
                clearInterval(this.interval);
                
                this.playing = false;
                };
            this.jump =function(){
            dir0 = this.class;
                d= {}
               d.topright =   d.right = '-50px 0 0 -50px';
               d.topleft = d.left = '-50px 0 0 50px';
            dir = {'margin':d[dir0]};
            dir2 = {'margin':'0 0 0 0'};     
            this.pointer.stop().animate(dir,250).animate(dir2,250)            
               
            
            };
                this.toggle = function(){
                if(this.playing){
                this.stop()
                }else{
                this.init()}
                    return this;
                    }
                    
                    this.switch = function(w) {
                    this.class = w;
                    }
                
           }

                    
                   function Blink(o){
this.o = o;
                this.blinking = false;
        this.init = function(){
            this.blinking = true;
            that = this;
            this.interval = setInterval(function(){that.blink()},600)
                };
                
                this.stop = function(){
                   this.o.stop(); 
                clearInterval(this.interval);
                
                this.blinking = false;
                };
            this.blink=function(){  
                this.o.stop().animate({"opacity":"0"},250).animate({"opacity":"1"},250)     ...