•  28-10-2019
  •  | 
  •  

Question

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>
</body>
</html>
Was it helpful?

Solution

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 ");
});

OTHER TIPS

For the sliding effect try slideUp() and slideDown().

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top