JSFiddle - React, Tailwind, and code Playground

by jasper

HTML

<div id="div">
DIV -- Mouse-enter ME!
</div>
<div id="relo">Relo -- I should fade in/out</div>

CSS

#div {
    border : 1px solid #000;
}

JavaScript

$(function() {

    var timeoutId;

    $('#div').mouseenter(function() {

        var el = $(this);
        timeoutId = setTimeout(function() {
            $('#relo').stop().animate({opacity: 1}, 'slow');
        }, 500);
    }).mouseleave(function() {
        clearTimeout(timeoutId);
        $('#relo').stop().animate({opacity: 0}, 'slow');
    });
});