JSFiddle - React, Tailwind, and code Playground

by dkunin

HTML

<div id="pointer" class="arrow topright"></div>

<div id="pointer2"></div>

CSS

#pointer{
position:absolute;
    width:100px;
    height:100px;
    top:50px;
    left:50px;
    background-color:white;

    

}
.arrow {
    background:url('http://clients.e-learningcenter.ru/files/shower.png') no-repeat;
}

.topright {
background-position:-300px 0;
   
}
.topleft {
background-position:-200px 0;
   
}
.left {
background-position:-100px 0;
   
}

.right {
background-position:0 0;
    

}

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

JavaScript

p = $(".arrow")
    jumping = true;
    
function jump(s){
    if(s) {p.stop();return false;}
    dir0 = p.attr('class').split(" ")[1];
        d= {}
        d.right = '-50px 0 0 -50px'
        d.left = '-50px 0 0 50px'
        d.topleft = '-50px 0 0 50px'    
        d.topright = '-50px 0 0 -50px'     
        dir = {'margin':d[dir0]}
        dir2 = {'margin':'0 0 0 0'}            
    p.animate(dir,500,'swing', function(){
            p.animate(dir2,500,'swing',jump)})
           }

   // jump()
    
            var Pointer = {
            
            init = function(obj,x,y,type){
            this.obj = $("#"+obj);
this.x = x;
this.y = y;
 this.type = type ;

//create and setup    
        this.d= {}
        this.d.topright = this.d.right = '-50px 0 0 -50px';
        this.d.left =this.d.topleft = '-50px 0 0 50px';
        this.dir = {'margin':this.type}         
            this.obj.css({
            'position':'absolute',
            'width':'100px',
            'height':'100px',
            'top':this.x,
            'left':this.y
            }).addClass(this.type).addClass('arrow')            
            }
            
            
            }
            
            var poi = new Pointer;
poi.init('pointer',250,250,'left')                
     


            $("#pointer2").on('click',function(){
        if(jumping){p.fadeOut() ;jump(true);jumping=false}
            else {p.fadeIn();jump();jumping=true}
            
            })