javascript - 链接以显示特定的 div，从侧面动画进入(在父级内)

Question

我遇到了一些与 jQuery 和 html/css 相关的问题。

我一直在研究一个横向滚动的 div，它包含几个 div，其中链接指的是“较小”的 div 之一(它们的入口应该是动画的)。

我在网上找到了一些和我想要的类似的东西: http://jsfiddle.net/NGL8P/21/不同的是，我想要一个按钮链接到一个特殊的div(但动画应该基本相同)。

这是我到目前为止所做的版本: http://jsfiddle.net/jkUzF/2/

每个要点都应链接到其中一个 div。有 15 个按钮，但我现在只制作了 5 个 div。五个 div 彼此定位(由于溢出:隐藏，它们不可见)。

我的主容器(包含所有可见的东西)叫做:#mainsectionlooong div(应该前后移动)被称为:#wrap那些应该有 15 个的 div 被称为:.container

编辑 1:有人认为这是为了理解我想要什么，所以我会尽量说得更清楚:

网站上有 15 个圆形按钮。他们每个人都应该链接到一个特定的 DIV(目前包含一些 lorem ipsum)。这些 DIV 中的每一个都依次排列，但除非将溢出更改为滚动，否则您看不到它们。当我按下按钮时，我希望它们从侧面进来。例如，当我按下“元素 1”下的第三个按钮时，我希望包含 lorem ipsum 的第三个 div 从侧面进入。当我按下第一个按钮时，我希望第一个 Div 从另一侧进入。一切都应该是动画的，当我“跳过”一个 div(从第 1 跳到第 3)时，我希望我跳过的那些(在本例中为 nr 2)快速“流动”。那更好吗？

Answer 1

$("a.circle").click(function(e) {
     e.preventDefault();
     var pos = $('a.circle').index(this);
     var newleft= -510 * pos;
     $("#wrap").animate({"left": newleft +"px"}, "slow");
});​