jQueryでapple風のナビゲーションを作りたかったんですが、うまくいきません。

基本的には、動くのですがmouseoverする回数分動いて止まらなくなります。
あと、出来れば、このままだと<ul>全体の大きさが変わるので、
$(this)を大きくするかわりに、それ意外の<li>を小さくできれば尚いいんですが・・・。
:animatedは入れてみたら動かなくなったりして、あまり使い方が解らないです。
どなたか教えて頂けないでしょうか?
よろしくお願いします。
width="100px"の<li>の中にwidth="150px"の<a>があり、mouseoverで<li>がwidth="150px"になり、見えなかった<a>の部分が見えるという鋳掛けです。
/*js*/

<script type="text/javascript">
$(function(){
$("#navi li").mouseover(function(){
$(this).animate({width:"150px"},"slow","swing");
}).mouseout(function(){
$(this).animate({width:"100px"},"slow","swing");
});
});
</script>
/*html*/

<ul id="navi">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

/*css*/

#navi{width:750px;}
#navi a{background: url("?") ; width:150px; height:93px; display:block;}
#navi li{background: url("?") ; width:100px; height:93px; overflow:hidden; display:block; float:left;} Add Star

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/08/15 17:50:39
  • 終了:2011/08/22 17:55:03

回答(2件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932011/08/15 18:55:19

hoverでうまくいくはず。

hover(over, out) - jQuery 日本語リファレンス http://semooh.jp/jquery/api/events/hover/over%2C+out/

id:mi-kun6520

(涙)一度、hoverでやってみました・・・。

全く同じ結果でした。(涙)

2011/08/15 21:01:29
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932011/08/16 15:14:57

これは?

http://jsfiddle.net/kYDDt/

$(function(){
  $("#navi li").hover(function(){
    if ($(this).width() == 100) {
      $(this).animate({width:"150px"},"slow","swing");
    }
  },function(){
    $(this).animate({width:"100px"},"slow","swing");
  });
});

urlのとこ?じゃなくてコピペで全部再現できる形でソースをどこかに貼るとかしたほうが問題が把握しやすくて回答付きやすいですよ。(ポイントあるともっといい)




jQuery UIのAccordionを利用するとか。

jQuery UI - Accordion Demos & Documentation

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません