JSFiddle - React, Tailwind, and code Playground

by jakelauer

HTML

<div id='parent'>
    <div id='trigger'></div>
    <div id='children'>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS

#children
{
    display: inline-block;
}

#trigger,
#children div
{
    display: inline-block;
    width: 50px;
    height: 50px;
    background: red;
}

#trigger
{
    background: blue;
}

.on
{
    background:green;
}

}

JavaScript

$('#trigger').on('mouseenter mouseleave', function(e){
    trigger(e.type)    
});

function trigger(type){
    var counter = 0;
    $('#children div').each(function () {
        var $this = $(this);
        var delay = (counter) * 100;
        
        if( type == 'mouseenter')
            var timer = setTimeout(function () { $this.addClass('on');  }, delay);
        else
            var timer = setTimeout(function () { $this.removeClass('on');  }, delay);
        
        counter++;
    });
}

$('#trigger').hover(function(){
}, function(){
})