jQueryでナビゲーションメニューを開発しています。そこで、最初のサブメニューを下にスライドし、右に2番目のサブメニューをスライドできるステップに来ました。マウスアウトするとフェードアウトします。しかし、問題は、2 回目にマウスオーバーしたときです。うまくいきません。初めてホバーするとうまくいきます。問題を認識できませんでした。マウスアウト機能は、実行後に完全に停止または復帰しないと思います。誰でもこの問題について提案してもらえますか
私のjQueryコード
<script type="text/javascript">
$(document).ready( function() {
jQuery('.box1').mouseover(function() {
///$(".box2").stop().slideDown('slow');
$('.box2').stop().animate({
height: 50
}, 1000);
});
jQuery('.box1').mouseout(function() {
$('.box2').stop().fadeOut();
// $(".box2").stop().slideUp('slow');
});
jQuery('.box4').mouseover(function() {
// $(".box3").stop().slideDown('slow');
//$(".box3").show('slide', {direction: 'left'}, 800);
$('.box3').stop().animate({
width: 200
}, 1000);
});
jQuery('.box4').mouseout(function() {
//$(".box3").stop().slideUp('slow');
// $(".box3").hide('slide', {direction: 'left'}, 800);
$('.box3').stop().fadeOut();
});
});
</script>
私のHTMLコード
<ul >
<li class="box1" >
<div class="box_sub" >Home</div>
<ul>
<li style="float:left;" class="box4" >
<div id="box2" class="box2" style="float:left">Sub 1.0</div>
<ul style="float:left;">
<li id="box3" class="box3" style="float:left;clear:none;" > Sub Sub 1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
私のCSSコード
.box_sub {
width: 200px;
height: 50px;
background-color: #0066CC;
color: #FFF;
text-align: center;
line-height: 50px;
font: Verdana, Geneva, sans-serif;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.box2 {
width: 200px;
height: 0px;
background-color: #0066CC;
color: #FFF;
text-align: center;
line-height: 50px;
font: Verdana, Geneva, sans-serif;
font-size: 14px;
cursor: pointer;
}
.box3 {
width: 0px;
height: 50px;
background-color: #0066CC;
color: #FFF;
text-align: center;
line-height: 50px;
font: Verdana, Geneva, sans-serif;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.box1 {
min-width: 200px;
}
ul {
list-style: none;
}
ul {
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}