Question

I want three div boxes on my site to slightly toggle and kind of ‘hover’ around slowly until the mouse is over them – and then my custom hover effects take place that I’m already using. (shaking/rattle and opacity). But I’m stumped on how to get the slightly animation going.

Here’s where I’m at with my fiddle – what did I miss?

http://jsfiddle.net/7t5q9/

Answer 1

You did not specify a duration in your example. As far as making the divs slowly float around, you could apply animations repeated animations with random top and left values as follows:

$(function() {
    var timeout;
    function moveAimlessly() {
        $(".aimless").each(function() {
            $(this).stop().animate({
                top: Math.floor(Math.random()*2) == 1 ? "+=" + Math.floor(Math.random()*41).toString() : "-=" + Math.floor(Math.random()*41).toString(),
                left: Math.floor(Math.random()*2) == 1 ? "+=" + Math.floor(Math.random()*41).toString() : "-=" + Math.floor(Math.random()*41).toString()
            }, 4000);
        });
        timeout = setTimeout(moveAimlessly, 4000);
    }
    moveAimlessly();

    $(".aimless").on("hover", function() {
        clearTimeout(timeout);
        $(".aimless").stop();
    });
});

Link to example: http://jsfiddle.net/7zZEG/1/