Java script and jquery help

JavaScript
1

hey friend,s can some one help me in this code … :slight_smile:


<html>
<head>
<title> jquery
</title>
<style type="text/css">
ul{
    color:red;
}
a{
text-decoration:none;
}
.bk{
background-color:silver;
color: white;
display:box;
width:140;
margin-left:0;
list-style-type:none;
padding-top: 0px;
}
</style>
<script src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul').addClass('bk');
$('li>ul').hide();
$('ul>li a').mouseover(function(){
$('li>ul').slideDown(200);
});
$('li>ul').mouseout(function(){
$('li>ul').slideUp(200);
});
});

</script>
</head>
<body>



<ul>
<li><a href="#"> Author</a>
<ul>
<li><a href="#">new</a></li>
<li><a href="#">old</a></li>
<li><a href="#">best</a></li>
<li><a href="#">good</a></li>
</ul>
</li>
</ul>
</body>
</html>

:rolleyes: the error is that when i mouseover the main link it slidedown as i wish and when i mouseout it slide up that i want but here is the point when i mouseout from link it slideup again and again so how can i control it…?:x

2

Hi there msz900,

Welcome to the forums.

One way to solve your problem would be to use setTimeOut()
With this method, when the mouse enters the menu area, you could call a function to expand it.
Then, as soon as the mouse leaves the area, you could cancel the function if it hasn’t been executed yet.
This means that when you move your mouse over the menu area again and again, the menu doesn’t remember all of this, and will expand only once.

Here’s an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Expanding menu example</title>
    <style type="text/css">
      ul{  color:red; }
      a{ text-decoration:none; }
      .bk{
        background-color:silver;
        color: white;
        display:box;
        width:140;
        margin-left:0;
        list-style-type:none;
        padding-top: 0px;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
  </head>

  <body>
    <ul id="menu">
      <li>
        <a href="#"> Author</a>
        <ul>
        <li><a href="#">new</a></li>
        <li><a href="#">old</a></li>
        <li><a href="#">best</a></li>
        <li><a href="#">good</a></li>
        </ul>
      </li>
    </ul>
    <script type="text/javascript">
      $(document).ready(function(){
        $('ul').addClass('bk');
        $('li>ul').hide();
        var mnuTimeout = null;
        
        $('#menu').mouseover(function(){
          clearTimeout(mnuTimeout);
          mnuTimeout = setTimeout(function(){$('li>ul').slideDown(200);},50);
        });
        $('#menu').mouseout(function(){
          clearTimeout(mnuTimeout);
          mnuTimeout = setTimeout(function(){$('li>ul').slideUp(200);},50);
        });
      });
    </script>
  </body>
</html>
3

TNXXX. LOVE U…
U SOLVE A VERY MUH 4 ME :-}
IT REALY HELP…