JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

HTML

<div class='box'>Hello</div>

CSS

.box {
    width: 100px;
    padding: 10px 5px;
    margin-left: 50px;
    background: #c33;
    text-align: center;
    font-size: 14pt;
    color: #fff;
}

JavaScript

var moving = true;
var box = $('.box');

function move() {
    // Only move box when 'moving' is true
    if (moving === true) {
        // Increment top margin of box
        box.css({
            marginTop: '+=1'
        });
        // Keep moving box while 'moving' is true
        setTimeout(move, 10);
    }
}
// Delay one second before moving box
setTimeout(move, 1000);

// Bind a mouseover event to any element with a class of "box"
box.mouseover(function() {
    // Stop moving box by setting 'moving' to false
    moving = false;
})
// Ensure to resume movement on mouseout
.mouseout(function() {
    moving = true;
    setTimeout(move, 10);
});