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，好吧。很明显，可以看到活动的一个，隐藏的不可见。我想点击活动的那个，然后fadeIn并显示我到目前为止已经设置的隐藏的那个，然后，当你选择其中任何一个隐藏的那个时，其他两个淡出，并且选中的一个滑入到位活跃的。

但是我使用了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

jquery自定义幻灯片标题菜单

1 个答案: