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);
});

其中top和left属性可以是您喜欢的任何内容，但请将其中一个属性设为否定，以便让它们离开屏幕。

你也可以将它们修改为bottom和right，让它们离开屏幕的另一边，但你需要一个非常高的价值（如2000）

容器内的Div在点击时飞过容器

1 个答案: