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 で適切にスタイル設定されています。したがって、明らかに、アクティブなものは表示され、非表示のものは表示されません。アクティブなものをクリックしてから、フェードインして非表示のものを表示したいのですが、これまでになんとかできました。次に、非表示のもののいずれかを選択すると、他の2つがフェードアウトし、選択したものが所定の位置にスライドしますアクティブなものの。

しかし、私は 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 に答える