与jQuery的动画窗口

问题描述：

嗨我想创建一个单页网站，其中包含与窗口大小相同的多个div。网站将有一个菜单，将引用页面上的每个div。我想要做什么当用户点击其中一个对应的div的菜单链接时，该窗口就会生成动画。与jQuery的动画窗口

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

当用户点击一个链接，我需要的窗口动画到上的div与此类似网站：

我怎样才能做到这一点？

“动画窗口”几乎不足以描述知道你想做什么。请描述你想看到的EXACT动画。有数百万种不同类型的动画。 – jfriend00 2012-08-10 17:23:45

GI我一分钟我链接到一个图像，将证明我的意思 – 2012-08-10 17:31:07

可能重复[高级jquery |滚动导航选定]（http://*.com/questions/11182505/advanced-jquery-scroll-nav-selected） – iambriansreed 2012-08-10 17:38:29

答

您链接到的网站是使用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

答

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

jquery有很多易于使用的手风琴插件，所以它们可能比从头编码更容易用于复杂的动画。

根据您添加的信息，也许这样的网格手风琴？ http://css-tricks.com/examples/InfoGrid/

与jQuery的动画窗口

相关推荐