JSFiddle - React, Tailwind, and code Playground

by Peter Doyle

HTML

<div class="bear">Bear</div>
<div class="icebergs">
    <div class="iceberg one"></div>
    <div class="iceberg two"></div>
    <div class="iceberg three"></div>
</div>

CSS

.bear{
    width:80px;
    height:40px;
    background:blue;
    padding:10px;
    position:absolute;
    top:110px;
    left:60px;
}

.icebergs{
    position:absolute;
    top:200px;
    width:700px;
    height:400px;    
    background:blue;
    opacity:.5;
}

.iceberg{
    width:60px;
    height:50px;
    top:-10px;
    left:0;
    position:absolute;
    background:#fff;
    border:1px solid blue;
}

.iceberg.one{ left:80px;}
.iceberg.two{ left:280px; }
.iceberg.three{ left:480px; }

JavaScript

var bear,      
    bearHeight,   
    water;

$(function(){

    bear= $(".bear");      
    bearHeight= bear.height();   
    water= $(".bear");
    
    bear.animate({top:(90+bearHeight)},400,"linear")
    
    $("body").mouseup(function() {
         animateJump();
      })
      .mousedown(function() {
       
      });
    
})


function animateJump(){
    
    
    var bearLeft= parseInt(bear.css("left"));
    //alert(bearLeft);
    
    bear.animate({top:40,left:(100+bearLeft)},300,"linear",function(){
       bear.animate({top:(90+bearHeight),left:(200+bearLeft)},300,"linear");
    });

}