JSFiddle - React, Tailwind, and code Playground

by id10922606

HTML

<div id="leftarrow">=>>>>>></div>
<div id="rhsarrow"><<<<<<<=</div>

<div class="mid"></div>

CSS

.mid {
    clear: both;
    border: 1px solid black;
    background-color: green;
    width: 100px;
    height: 100px;    
    position: relative;
}
#leftarrow, #rhsarrow {
    float: left;
    border: 1px solid black;
    margin-bottom: 4px;
    cursor: pointer;
}

JavaScript

/*ELEMENT MOVE ON HOVER*/

// declare variables
var timer;
var speed = 100;

// slide function
function slide() {
    return setInterval(function() {
        $(".mid").animate({'left': '+=5px'
        }, 100);
    }, speed);
}

// hover event for the button
$("#leftarrow").hover(function() {
    timer = slide();
}, function() {
    clearInterval(timer);
});

// slide function
function slide2() {
    return setInterval(function() {
        $(".mid").animate({'left': '-=5px'
        }, 100);
    }, speed);
}

// hover event for the button
$("#rhsarrow").hover(function() {
    timer = slide2();
}, function() {
    clearInterval(timer);
});