jQuery自定义幻灯片标题菜单

Question

我想做的如下：

我在页面顶部有一个标题栏。 看起来像这样：

标题：管理员[客户] [报告]

该html是：

<div id="header">
<span class="title">Title:</span>
<div id="section" class="active"><a href="javascript:void();">Admin</a></div>
<div id="section" class="hidden"><a href="javascript:void();">Customers</a></div> 
<div id="section" class="hidden"><a href="javascript:void();">Reports</a></div>
</div>

都很好用CSS样式，好吧。 因此很明显，可以看到活跃的人，看不到隐藏的人。 我要单击活动窗口，然后淡入并显示隐藏的窗口，到目前为止，我已经设法做到了，然后，当您选择其中一个隐藏窗口时，其他两个窗口就会淡出，然后选定的窗口滑入到位活跃的。

但是我使用了animate属性，这一切都是歪斜的。 出于某种原因，它会动画显示页面，不是让我看不到它，而是在我的DIV之外。 我尝试在其周围放置绝对DIV，因为我认为然后当我减去

animate({left: $(this).offset().left)}); 

离开后，它只会在DIV内部进行动画处理。

标头，标题和部分的CSS为：

#header     { position: absolute; top: 0px; width: 1000px;
        height: 60px; text-align: left; display: block; }       
.title, #section, #section a
        {position: relative; left: 10px; font-family: 'Play', sans-serif;
        font-size: 50px; font-weight: bold;  float: left;}
.title  {color: #9900ff; display: inline-block; width: 150px;}
#section, #section a    
    {color: #CC81FD; font-size: 50px; margin-right: 5px; }
#section.active, #section.active a
          {display: inline-block; text-decoration: none;}
#section.hidden a {display: none; text-decoration: none;}
#section a:hover  {color: #9900FF;}

我目前（但失败）的jQuery是：

var curX = $(this).offset().left;
var curElement = this;
$(this).animate({left: -curX});
$("#section a").not(curElement).fadeOut("slow");

如果有人可以帮助，那就太好了！

Answer 1

好吧，经过1个小时的工作，我想我已经完成了！ 希望它能按您的意思工作！ 但是我将（无效的）ID“节”更改为一个类！ 在这里您可以看到它： JSFiddle