jquery animated menu
ASP.NET
menu with jquery
for sliding menu effect. I added this code and it is working Fine. The Problem is the ul.level2
are showing and hiding once being mouseout
from the ul.level1
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery.1.4.js"></script>
</head>
<body>
<div id="menu">
<div id="Menu1">
<ul class="level1">
<li><a class="level1">Item1</a>
<ul class="level2">
<li><a href='#'>SubItem1</a></li>
</ul>
</li>
<li><a class="level1">Item2</a>
<ul class="level2">
<li><a href='#'>Sub1</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('ul.level1 li a.level1').mouseover(function() {
$('ul.level1 li a.level1 ul.level2').animate(top:0,height: show);
});
$('ul.level1 li a.level1').mouseout(function() {
$('ul.level1 li a.level1 ul.level2').animate(top:0,height: hide);
});
</script&开发者_如何学Pythongt;
</body>
</html>
From the documentation, mouse over and mouse out are usually one query, not separated. All one function
$("div.overout").mouseover(function() {
i += 1;
$(this).find("span").text( "mouse over x " + i );
}).mouseout(function(){
$(this).find("span").text("mouse out ");
});
For the sliding effect try slideUp()
and slideDown()
.
精彩评论