JSFiddle - React, Tailwind, and code Playground

by dkunin

HTML

<div id="pointer"></div>

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

CSS

#pointer{
position:absolute;
    width:37px;
    height:93px;
    top:50px;
    left:50px;
    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
}

JavaScript

p = $("#pointer")
    jumping = true;
    function jump(s){
    if(s) {p.stop();return false;}
    p.animate({
    "margin-top":'-50px'
    },500, function(){
    p.animate({
    "margin-top":'0px'
    },500,jump)
    
    })
    }

    jump()
    

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