0

我想要做的如下：

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

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

用于此的 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");

如果有人可以提供帮助，那就太棒了！

4

1 回答 1

1

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

于 2012-06-21T13:00:06.113 回答