JSFiddle - React, Tailwind, and code Playground

by jasper

HTML

<img class="thumb-element" id="one" />
<img class="thumb-element" id="two" />
<img class="thumb-element" id="three" />
<img class="thumb-element" id="four" />

CSS

img {
    position   : relative;
    display    : block;
    width      : 100px;
    height     : 100px;
    background : #000;
    border     : 1px solid #000;
    margin     : 5px;
}

JavaScript

$('.thumb-element').on('mouseout', function () {
    if ($('.thumb-element').filter('.active-mouseout').length == 0) {
        //there are no elements with both the `thumb-element` class and the `active-mouseout` class so you can do work here
        $(this).addClass('active-mouseout').animate({left  : '+=50px'}, 250, function () {
            $(this).animate({left : '-=50px'}, 250, function () {

                //now we remove the `active-mouseout` class so another `mouseout` event can run
                $(this).removeClass('active-mouseout');
            });
        });
    }
});