JSFiddle - React, Tailwind, and code Playground

by Nate Armstrong

HTML

<div id="cover">
  <div id="dequeue" class="blocks">
    <a href="#">About Us</a>
    <a href="#">Giving Back</a>
    <a href="#">All Natural</a>
    <a href="#">Best Value</a>    
  </div>
</div>

CSS

#cover {
  height: 200px;
  width: 100%;
  border: 1px solid #00FF00;
  overflow: hidden;
  display: block;
  background-color:#322a2b;
}

#dequeue {
  display: inline-block;
  width: 100%;
  height: 1px;
  position: relative;
  top: 200px;
}

#dequeue a {
  display: inline-block;
  background-color: rgba(243,242,227,0.8);
  color:#322a2b;
  position: relative;
  height: 200px;
  top: -40px;
  padding:10px;
  margin:5px;
}

JavaScript

$("a").hover(function() {
  if (!$(this).hasClass('animated')) {
    $(this).dequeue().stop().animate({
      top: "-85px"
    });
  }
}, function() {
  $(this).addClass('animated').animate({
    top: "-40px"
  }, "normal", "linear", function() {
    $(this).removeClass('animated').dequeue();
  });
});