JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
</head>
<body>
<div>
    Buggy example (whith fadeIn, fadeOut functions)
    <div id="hoverdiv1" style="width:200px; height:100px; background-color:red;">Enter, leave & reenter this with the cursor while the animation is active.</div>
    <div id="fadediv1" style="width:200px; height:100px; background-color:blue; display:none;"></div>    
</div>
<div style="margin-top:10px;">
    Working example (with fadeTo function)
    <div id="hoverdiv2" style="width:200px; height:100px; background-color:red;">Enter, leave & reenter this with the cursor while the animation is active.</div>
    <div id="fadediv2" style="width:200px; height:100px; background-color:blue; display:none;"></div>    
</div>
<div>

</div>
</body>
</html>

JavaScript

function fadeIn1(){
        $("#fadediv1").stop(true).fadeIn(2000);    
    }
    
    function fadeOut1(){
        $("#fadediv1").stop(true).fadeOut(2000);            
    }

    function fadeIn2(){
        $("#fadediv2").stop(true).fadeTo(2000, 1);    
    }
    
    function fadeOut2(){
        $("#fadediv2").stop(true).fadeTo(2000, 0);            
    }

    function init(){
        $("#hoverdiv1").mouseenter(fadeIn1);
        $("#hoverdiv1").mouseleave(fadeOut1);
        $("#hoverdiv2").mouseenter(fadeIn2);
        $("#hoverdiv2").mouseleave(fadeOut2);        
    }
    
    $(document).ready(init);