JSFiddle - React, Tailwind, and code Playground

by zhukovroman

HTML

<div class="items"></div>

<div class="items"></div>

<div class="items"></div>

CSS

.items {
    width: 100px;
    height: 20px;
    background: #ccc;
    margin: 10px;
}

JavaScript

$(document).ready(function() {

    function setHover() {
        $(".items").hover(function() {
            $(this).animate({
                opacity: 0.5
            }, 500);
        }, function() {
            $(this).animate({
                opacity: 1
            }, 500);
        });
    }

    setHover();

    function deleteHover() {
        $('.items').unbind('mouseenter mouseleave');
    }

    function hoverInterval() {
        deleteHover();
        setTimeout(setHover(), 2000);
    }

    $(".items").click(function() {
        hoverInterval();
    });

});