How can I animate DIVs moving from a central point to off-screen?

Question

Is it possible to have divs located around a central point and then on hover for them to whisk off screen and return when the mouse is gone?

This what the layout is looking like, the idea is for the green "leaves" to whisk off to show the branches and the menus. Would this be possible with JavaScript and PHP?

Answer 1

Any chance I could convince you to not design a site this way?

I suppose not, so the answer is to use jQuery. Here is the jQuery reference for animation, which you'll need to study carefully.

Answer 2

You are going to need to combine a few jQuery features.

The animation feature at: http://api.jquery.com/animate/
The mouse over feature: http://api.jquery.com/mouseover/
The mouse out feature: http://api.jquery.com/mouseout/

Have "dummy divs" where the mouse over is detected that move their ID's real div out of view using animate it, and bring it back with mouseout

I found this interesting so coded it for myself... I did it as below:

<style type="text/css">
body {
    overflow:hidden;
}
.leaf {
    position:relative;
    background-color:#0F0;
    height: 100px;
    width: 100px;
}
.branch {
    display:inline-block;
    background-color:#F00;
    height: 100px;
    width: 100px;
}
</style>
<script type="text/javascript">
$(function(){
    var w = $(document).width();
    var h = $(document).height();
    var r = 250;
    $(".branch").hover(function() {
                    var rand = Math.random();
                    var x,y;
                    if(rand<0.25) {
                        x = w;
                        y = h*Math.random();
                    } else if(rand<0.5) {
                        x = -w;
                        y = h*Math.random();
                    } else if(rand<0.75) {
                        x = w*Math.random();
                        y = h;
                    } else {
                        x = w*Math.random();
                        y = -h;
                    }
                    $(this).children().animate({left: x, top: y});        
                }, function () {
                    $(this).children().animate({left: '0', top: '0'});  
                })
});
</script>
<div class="wrap">
    <div class="branch"><div class="leaf"></div></div><!-- etc -->
</div>