JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<body id="splash">
<div id="splash_center">
        <div style="z-index:200;" id="splash_work"><a  style="z-index:200;" class="work_link" href="#">WORK</a></div>
        <div style="z-index:200;"id="splash_play"><a style="z-index:200;" class="play_link" href="#">PLAY</a></div>
    <div id="splash_bars">
        <div style="z-index:-200;" id="splash_bar_mono"></div>          
    </div>

</div>
  <div id="splash_graphic"></div>

</body>

JavaScript

$(document).ready(function(e) {
    $('.work_link').hover(

    function() {
        $('.work_link').stop(true, false).animate({
            color: '#ffffff'
        }, 500);
        $('#splash_bar_mono').stop(true, false).animate({
            width: '350px'
        }, 500).css({
            'float': 'right'
        });
        //mouseover
    }, function() {
        $('.work_link').stop(true, false).animate({
            color: '#000'
        }, 500);
        $('#splash_bar_mono').stop(true, false).animate({
            width: '10px'
        }, 500); //mouseout
    });
    $('.play_link').hover(

    function() {
        $('.play_link').stop(true, false).animate({
            color: '#ffffff'
        }, 500);
        $('#splash_bar_mono').animate({
            width: '325px'
        }, 500).css({
            'float': 'left'
        }); //mouseover
    }, function() {
        $('.play_link').stop(true, false).animate({
            color: '#000'
        }, 500); //mouseout
        $('#splash_bar_mono').stop(true, false).animate({
            width: '10px'
        }, 500);
    });
});