人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: M
●カテゴリ:インターネット ウェブ制作
✍キーワード:ADD animate Apple background CSS
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov

hoverでうまくいくはず。

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

◎質問者からの返答

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

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


2 ● Cherenkov

これは?

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ