與jQuery的動畫窗口

Question

嗨我想創建一個單頁網站，其中包含與窗口大小相同的多個div。網站將有一個菜單，將引用頁面上的每個div。我想要做什麼當用戶點擊其中一個對應的div的菜單鏈接時，該窗口就會生成動畫。

http://www.nistoralexandru.comule.com/div.jpg

當用戶點擊一個鏈接，我需要的窗口動畫到上的div與此類似網站：

http://shahkaarshah.com/

我怎樣才能做到這一點？

Answer 1

您鏈接到的網站是使用Flash構建的，使用javascript複製不同頁面元素的動畫應該不難，但實際上並沒有快速的「一刀切」功能。

下面是它是如何通常做一個簡單的例子：

構建某種HTML結構：

​<div id="site"> 
    <div id="main" class="page"> 
     <ul> 
      <li><a href="#page1">Page 1</a></li> 
      <li><a href="#page2">Page 2</a></li> 
      <li><a href="#page3">Page 3</a></li>    
      <li><a href="#page4">Page 4</a></li> 
      <li><a href="#page5">Page 5</a></li> 
     </ul> 
    </div> 
    <div id="page1" class="page"><a href="#main">Back</a></div> 
    <div id="page2" class="page"><a href="#main">Back</a></div> 
    <div id="page3" class="page"><a href="#main">Back</a></div> 
    <div id="page4" class="page"><a href="#main">Back</a></div> 
    <div id="page5" class="page"><a href="#main">Back</a></div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

和動畫它圍繞視口一點點的javascript：

$('.page a').on('click', function(e) { 
    e.preventDefault(); 
    var href = $(this).attr('href'), 
     top = $(href).css('top'), 
     left = $(href).css('left'); 
    $("#site").animate({top: '-'+top, left: '-'+left}, 1000); 
}); 

這裏是一個FIDDLE

Answer 2

你可能意味着什麼像手風琴？ http://jqueryui.com/demos/accordion/

jquery有很多易於使用的手風琴插件，所以它們可能比從頭編碼更容易用於複雜的動畫。

根據您添加的信息，也許這樣的網格手風琴？ http://css-tricks.com/examples/InfoGrid/