Jquery 单击时容器内的div飞越容器

我在一个容器中有4个div，就像这样

.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>

.container{
宽度：500px；
高度：450px；
保证金：0自动；
边框：1px纯蓝色；
}
.box1{
背景色：#F00；
宽度：350px；
高度：450px；
浮动：左；
}
.box2{
背景色：#0F0；
宽度：150px；
高度：150像素；
浮动：对；
}

我希望单击（在容器或任何div上），容器内的所有div都会飞出屏幕（像爆炸一样）。 我可以用jQuery制作动画，但我找不到如何将div放在容器外。

---

有什么想法吗？

您可以使用

动画功能：

$(".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);
});

其中
顶部
和
左侧
属性可以是您喜欢的任何属性，但保留其中一个为负数以使其离开屏幕

您也可以将它们修改为
bottom
和
right
，让它们离开屏幕的另一侧，但您需要一个相当高的值（如2000）
好的，您需要做的第一件事是计算每个DIV的端点坐标。您可能希望一个到左上角，一个到右上角，等等。基本上，这是你的挑战。似乎不起作用，因为盒子在容器中，容器不动。开始时，容器在页面上居中（框也是如此），点击后，框会跳出屏幕……我想我明白了，框必须处于“相对”位置。无论如何，谢谢你：）