0

私はこのようにコンテナに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をコンテナーの外に配置する方法が見つかりません。何か案が ？

4

1 に答える 1

0

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属性は好きなものにできますが、そのうちの 1 つを負にして画面外に出させます。

bottomそれらを変更してright、画面の反対側から外れるようにすることもできますが、かなり高い値 (2000 など) が必要です。

于 2012-08-01T10:35:14.420 に答える