jQuery中的角到角顯示動畫？

Question

我需要動畫一個相對定位的div，動畫從display:none;到display:block;。我需要「縮放」它，從右下角開始到左上角。有沒有辦法做到這一點？ （最好在jQuery，但任何工作是好的）

Answer 1

這是你在找什麼？

http://jqueryui.com/resizable/

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate

http://jqueryui.com/effect/

Answer 2

我不知道你想淡入或改變元素的大小。這聽起來像你想要把它從隱藏。

由於HTML佈局全部從頂部和左側完成，因此從右下角到左上角進行動畫製作是棘手的問題。

通過仔細地結合slideUp和slideDown固定或you can get an element to show from the bottom up.位置是絕對的，但我還沒有聽說過的方式滑動從右到左，而無需使用一些very advanced jQuery with bleeding edge includes.

所以我提供這個解決方案：由於DIV你想顯示是相對於你的定位可能有某種包裝，或一個容易的地方。

使用一個包裝器，您可以將它設置爲隱藏的規則，然後將「隱藏」div放在其邊界之外。

Now with a simple jQuery animate您可以通過重新定位它的包裝

這裏的範圍內帶來 '秀' 是一個例子：

HTML：

<div class='wrapper'> 
    <div class='growIt'>Text for div</div> 
</div> 
<input type='button' id='showHide' value='Show/Hide'/> 

CSS：

.wrapper{ 
    background:blue; 
    position:relative; 
    width:200px; 
    height:200px; 
    overflow:hidden; 
} 
.growIt{ 
    background: red; 
    position:relative; 
    width:200px; 
    height:200px; 
    top:200px; 
    left:200px; 
    display:block; 
} 

jQuery：

$(function(){ 
    var hiding = true; 
    $('#showHide').click(function(){ 
     if(hiding == true){ 
      hiding = false; 
      $('.growIt').animate({top:'0px',left:'0px'},2000);  
     }else{ 
      hiding = true; 
      $('.growIt').animate({top:'200px',left:'200px'},2000);  
     } 
    }); 
}); 

當您單擊按鈕時，它將隱藏或顯示紅色的div。

如果您有動畫顯示從display:none到display:block的要求，是因爲你需要它來推動其他表單元素的方式進行時，映入眼簾的，I would suggest adding another wrapper with position:relative and then making the wrapper slide 'down' from the bottom.