jquery - 容器内的 div 在单击时飞过容器

Question

我在一个容器中有 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>

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

Answer 1

您可以使用以下animate功能：

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

其中topandleft属性可以是任何你喜欢的东西，但要让其中一个为负数，让它们离开屏幕。

您还可以将它们修改为bottom并right让它们离开屏幕的另一侧，但您需要一个相当高的值（如 2000）