JSFiddle - React, Tailwind, and code Playground

by Nirvanachain

HTML

<button id="right">&raquo;</button>

<div class="block1">block 1</div>
<br />
<div class="block2">block 2</div>

CSS

.block1 {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:100px;
  height:90px;
  margin:5px;
}

.block2 {
  position:absolute;
  background-color:#abc;
  right:90px;
  width:150px;
  height:90px;
  margin:5px;
}

JavaScript

$("#right").hover(function(){
  $(".block1").animate({
      width: "+=50px",
      opacity: 0.5,
      borderTopRightRadius: 50,
      borderBottomRightRadius: 50,
      borderTopLeftRadius: 50,
      borderBottomLeftRadius: 50
  }, "900");
},function(){
    $(".block1").animate({
        width: "-=50px",
        opacity: 100,
        borderTopRightRadius: 0,
        borderBottomRightRadius: 0,
        borderTopLeftRadius: 0,
        borderBottomLeftRadius: 0
    }, "900");
});


$("#right").hover(function(){
  $(".block2").animate({
      width: "-=50px",
      opacity: 100,
      borderTopLeftRadius: 0,
      borderBottomLeftRadius: 0,
      borderTopRightRadius: 0,
      borderBottomRightRadius: 0
  }, "slow");
},function(){
    $(".block2").animate({
        width: "+=50px",
        opacity:0.5,
        borderTopLeftRadius: 50,
        borderBottomLeftRadius: 50,
        borderTopRightRadius: 50,
        borderBottomRightRadius: 50
    }, "slow");
});