JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="test"></div>
    <div class="box-one"></div>
    <div class="box-two"></div>
    <div class="box-three"></div>
</body>

CSS

#test {
    background-color: #888;
    height: 110px;
}
div {
    border: 1px solid red;
    height: 30px;
    width:60px;
}

JavaScript

var pairar;
$('#test').hover(function () {
    pairar = setTimeout(function (self) {
        $('.box-one, .box-two, .box-three').hide();
        $(self).removeClass('test').addClass('another-test').stop().animate({
            'height': '210px'
        });
        $('.my-message').fadeIn();
    }, 400, this);
}, function () {
    clearTimeout(pairar);
    $('.box-one, .box-two, .box-three').fadeIn();
    $(this).removeClass('another-test').stop().animate({
        'height': '110px'
    }).addClass('test');
    $('.my-message').fadeOut();
});