JSFiddle - React, Tailwind, and code Playground

by chrisallenmoore

HTML

<ul class="moveme">
    <li class="twitter"><a href=""><i class="icon-twitter-sign icon-large"></i></a>

    </li>
    <li class="facebook"><a href ""><i class="icon-facebook-sign icon-large"></i></a>

    </li>
</ul>
<div id="moveit">share</div>

SCSS

#moveit {
  width: 50px;
  height: 20px;
  text-align: center;
  /*background-color: blue;*/
  overflow: visible;
  margin-top: -36px;
}
.moveme {
    margin-top: 0px;
    width: 10px;
    height: 20px;
    /*background-color: grey;*/
    opacity: 0;
    left: 0px;
    cursor: pointer;
    position: relative; /* moving animation won't
    work without this */
    li {
      display: inline-block;
      position: relative;
      margin-left: -15px;
      color: grey;
      /*opacity: 0;*/
    }
  .twitter {
      left: -30px;
      position: relative;
    }
    .facebook {
      left: -40px;
      position: relative;
    }
  }

JavaScript

//$(document).ready(function() {

$(".moveme").on('mouseenter', function () {

    $(".moveme").animate({
        width: '100px',
        opacity: '1'
    });
    $(".twitter").animate({
        left: '40px'
    });
    $(".facebook").animate({
        left: '55px'
    });

});

$(".moveme").on('mouseleave', function () {

    $(".moveme").animate({
        width: '10px',
        opacity: '0'
    });
    $(".twitter").animate({
        left: '-40px'
    });
    $(".facebook").animate({
        left: '-65px'
    });

});

//});