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

jqueryのロールアウト(slidedown)のプログラムを作っていますが、マウスオーバーした際に リストにマウスオーバーすると何回も slidedown が実行されてしまいます。これを回避するにはどうしたらよいでしょうか?

<script type="text/javascript" src="jquery_2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//alert("test");

$("#menu li").mouseover(function(){
//alert("test");

$(".box1",this).slideDown(200);
});

$(".box1 li").hover(function(){
$(".box1 p").css({
"display":"none"
});
$("p",this).css({
"display":"block"
});

});

$("ul#menu").mouseout(function(){
$(".box1").css({
"display":"none"
});

});
});
</script>
</head>

<body>
<ul id="menu">
<li class="navi_dai"><div class="wrap"><a href="#">navi1</a>
<div class="box1">
<ul>
<li id="navi1_1"><a href="#">navi1_1</a><p>ここが説明部分です1</p></li>
<li id="navi1_2"><a href="#">navi1_2</a><p>ここが説明部分です2</p></li>
<li id="navi1_3"><a href="#">navi1_3</a><p>ここが説明部分です3</p></li>
<li id="navi1_4"><a href="#">navi1_4</a><p>ここが説明部分です4</p></li>
</ul>
</div>
</div>
</li>
<li><a href="#">navi2</a></li>
<li><a href="#">navi3</a></li>
<li><a href="#">navi4</a></li>
<li class="clear"></li>
</ul>
</body>
</html>

●質問者: hashimajc
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● うぃんど
●167ポイント
$("#menu li").mouseover(function(){
//alert("test");

 $(".box1:not(:animated)",this).slideDown(200);
});

2 ● 7cc
●167ポイント

こういうことがしたいのでしょうか

$(document).ready(function() {

 $("#menu li").mouseenter(function() {
 $(".box1", this).slideDown(200);
 })

 $(".box1 li").hover(function() {
 $(".box1 p").css({
 "display": "none"
 });
 $("p", this).css({
 "display": "block"
 });
 });

 $("#menu .wrap").mouseleave(function() {
 $(".box1").css({
 "display": "none"
 });
 });

});

デモ http://jsfiddle.net/H7Zjr/


3 ● ニコ
●166ポイント

このあたりが参考になりませんか?
http://study.syoyu.net/jquery/slideup%E3%80%81slidedown%E3%81%A7stop--%E3%82%92%E4%B8%8A%E6%89%8B%E3%81%8F%E5%8B%95%E4%BD%9C%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95

http://plus.vc/web/javascript/3713/

関連質問

●質問をもっと探す●



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