JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="bouncer" id="bouncer1" title="bolinha 1">
		<img src="http://dave-woods.co.uk/wp-content/uploads/2008/01/circle.gif" />
	</div>
    <div class="bouncer" id="bouncer2" title="bolinha 2">
		<img src="http://dave-woods.co.uk/wp-content/uploads/2008/01/circle.gif" />
	</div>
</div>

CSS

#container {
    position: absolute;
    width: 300px;
    height: 200px;
    border: 2px solid black;
	background:#f3f3f3;
}
.bouncer{position: absolute; width: 20px; height: 20px;}

JavaScript

$(document).ready(function()
{
	$('.bouncer').click( function(){
		alert('clicaram na: ' + $(this).attr('title'));
	});
});

$(function() {
    var minSpeed = .02;
    var maxSpeed = .06;
    var varSpeed = .005;

    function startBounce(element) {
        var container = element.parent();
        var width = container.innerWidth() - element.outerWidth();
        var height = container.innerHeight() - element.outerHeight();

        var vertSpeed = ((Math.random() * (maxSpeed - minSpeed)) + minSpeed);
        var horzSpeed = ((Math.random() * (maxSpeed - minSpeed)) + minSpeed);
        bounce(element, vertSpeed, height, 'top');
        bounce(element, horzSpeed, width, 'left');
    }

    function bounce(element, speed, max, dir) {
        speed += ((Math.random() * varSpeed) - (varSpeed / 2));
        speed = speed < minSpeed ? minSpeed : (speed > maxSpeed ? maxSpeed : speed)
        var time = max / speed;
        var position = element.position();
        if (position[dir] < 2) {
            target = max;
        } else {
            target = 0;
        }

        var style = {
            queue: false
        };
        style[dir] = target;
        element.animate(style, {
            duration: time,
            queue: false,
            easing: "linear",
            complete: function() {
                bounce(element, time, max, dir);
            }
        });
    }

    startBounce($('#bouncer1'));
    startBounce($('#bouncer2'));
});