jquery自定义幻灯片标题菜单
jquery自定义幻灯片标题菜单
提问于 2012-06-21 19:43:23
我想做的事情如下：
我在我的页面顶部有一个标题栏。它看起来是这样的：
职位:管理客户
其中的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属性，所有的东西都被扭曲了。出于某种原因，它在页面之外显示动画，不是太多以至于我看不到它，但足够了，在我的DIVs之外也是如此。我试着在它周围放置一个绝对的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");如果有人能帮上忙，那就太棒了！
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-06-21 21:00:06
嗯，经过一个小时的工作，我想我已经做到了！我希望它能像你想的那样工作！但是我把(无效的) ID "section“改成了一个class！你可以在这里看到它：JSFiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11137399
复制相关文章
相似问题
腾讯云开发者
