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>

我想上單擊（在容器或任何DIV），所有的div裏面的容器飛，去關閉屏幕（如爆炸）。我可以用jQuery做動畫，但我找不到如何將div放在容器外。有什麼想法？

來源

2012-08-01 kek

那麼你需要做的第一件事就是制定出每個DIV的結束座標。大概你想要一個人到左上角，一個到右上角等等。這實際上是你的挑戰。 – Utkanos 2012-08-01 10:29:55

可以使用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年）

來源

2012-08-01 10:35:14

似乎不起作用，因爲盒子在容器中，容器不動。在開始時，容器在頁面上居中（盒子也是如此），點擊後，這些盒子就會出現在屏幕外... – kek 2012-08-01 10:51:51

想想我明白了，盒子必須處於「相對」的位置。不管怎麼說，還是要謝謝你：） – kek 2012-08-01 11:12:16

Div的內部容器飛越容器上點擊

回答

相關問題