Question

I have 4 divs in a container, like this

.container{
    width:500px;
    height:450px;
    margin:0 auto;
    border:1px solid blue;  
}
.box1{  
    background-color:#F00;
    width:350px;
    height:450px;
    float:left;
}

.box2{
    background-color:#0F0;
    width:150px;
    height:150px;
    float:right;    
}

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>
</div>

I would like on click (on container or any div), that all divs inside container fly, and go off the screen (like an explosion).
I can do the animation with jQuery, but i can’t find how to put the divs outside the container.
Any idea ?

Answer 1

You can use the animate function:

$(".container").click(function()
{
    $(".box1").animate({top: "-200px", left: "-400px" }, 1000);
    $(".box2").animate({top: "-300px", left:  "100px" }, 1000);
    $(".box3").animate({top: "-500px", left: "-200px" }, 1000);
    $(".box4").animate({top:  "100px", left: "-500px" }, 1000);
});

in which the top and left attributes can be anything you like, but keep one of them negative to let them go off screen.

You can also modify them to bottom and right to let them go off the other side off the screen, but you need a pretty high value (like 2000)