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:

http://pena-alcantara.com/aramael/wp-content/uploads/2010/04/Paper-Browser.8.5×11.Horizontal3.jpg

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

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>