JSFiddle - React, Tailwind, and code Playground

by f0t0n

CSS

.item {
    border: 1px solid #000;
}
.item.red {
    border-color: #ff0000;
}

JavaScript

var body$ = $('body'),
    canAnimate = true;

for(var i = 10; i--;) {
    var div$ = $('<div>').css({
        width: 400,
        height: 200
    })
    .addClass('item').html(i+1);
    body$.append(div$);
}


$('.item').on('mouseenter', function() {
    var nextItem$ = getNextItem($(this));
    if(!nextItem$.length || !canAnimate) {
        return;
    }
    nextItem$.addClass('red');
    canAnimate = false;
    body$.animate({
        scrollTop: nextItem$.offset().top
    },
    500,
    function() {
        canAnimate = true;
    });
}).on('mouseleave', function() {
    var nextItem$ = getNextItem($(this));
    nextItem$.removeClass('red');
});

function getNextItem(item$) {
    return item$.next('.item');
}