Can't fade out submenu, with jQuery

This is my first question! Certanly you will help me on this.

I´m working on this horizontal menu:

HTML:

<div id="menu">
  <ul>
    <li><a href="#">MENU 1</a>
      <ul>
        <li><a href="#">SUBMENU 1.1</a>
          <ul>
            <li><a href="#">SUBMENU 1.1.1</a></li>
          </ul></li>
        <li><a href="#">SUBMENU 1.2</a></li>
        <li><a href="#">SUBMENU 1.3</a></li>
      </ul></li>
    <li><a href="#">MENU 2</a>
      <ul>
        <li><a href="#">SUBMENU 2.1</a>
          <ul>
            <li><a href="#">SUBMENU 2.1.1</a></li>
          </ul></li>
      </ul></li>          
    <li><a href="#">MENU 3</a></li>         
  </ul>
</div>

CSS:

  body 
  {

    font-family: "calibri";
    margin:0;
    padding: 0;
  }

  #menu
  {
    width: 100%;
    min-width: 400px;
    height: 30px;
    background-color: #222;
  }

  #menu ul 
  { 
    line-height: 30px; 
  }

  #menu ul li 
  {
    list-style: none; 
    float: left; 
    position: relative; 
  }

  #menu ul li a 
  { 
    padding-left: 5px; 
    text-decoration: none; 
    width: 100px; 
    height: 30px; 
    color: white; 
    background-color: black; 
    display: block;
  }

  #menu ul a:hover 
  { 
    background-color: grey; 
  } 

  #menu li ul 
  { 
    display: none;
    position: absolute;
    left: 0px;
    top: 100%;
    padding-top: 3px;
    padding-left: 3px;
    line-height: 20px;
  }

  #menu li ul li a 
  {
    height: 20px;
    font-size: small; 
  }

  #menu li:hover > ul 
  { 
    display: block;
  }

  #menu li ul li a 
  {
    width: 150px;
  }

  #menu li ul li 
  { 
    padding-top: 1px;
  }

  #menu li ul li ul 
  {
    left: 100%; 
    top: 0;
  }

  #menu li:hover > a 
  {
    background-color: grey;
  }

JQUERY:

$(function() {

  $('li > ul').animate({'opacity': 0});

  $('li').hover(function () {
    $(this).find('ul:first').stop().animate({'opacity': 1});
  },function() {
    $(this).find('ul:first').stop().animate({'opacity': 0});
  });

});

As you can see, the fade in effect (with opacity) is working when the option is hovered, but how can I make it fade out? I'm working with IE9.

Thanks!

Answers


First off, I made a jsFiddle with the provided code. As you can see, it works just fine, and that is because jsFiddle is set to run Javascript onLoad.

So what you need to do is make sure your function is run after the DOM is loaded, by wrapping it in a code block like the following:

$(document).ready(function() {
  // Your JS function here

});

I assume you want to fade in the option when your mouse pointer is hovering on it and fade it out when you move the mouse pointer away from the same option. Specify that clearly in your question. But since you are new to SO, you are spared from getting downvoted :P

Making this assumption, you need to write code separately for mousever and mouseout events.

$(document).ready(function() {

    $('li').mouseover(function(e){
        $(this).fadeIn(500);
    });

    $('li').mouseout(function(e){
        $(this).fadeOut(500);
    });

});

Try reading about mouseover and mouseout events from jquery home page.


I have found the solution ...

At the CSS, I have comment this:

/*#menu li:hover > ul { display: block;}*/ 

I have also replace the jQuery with this:

$('#menu ul li').hover(function () { $(this).find('ul:first').stop().fadeToggle('fast');});

Thanks!


Need Your Help

PHP POST variable containing number causing 404, yet if its a string or letter it works fine

php variables post if-statement http-status-code-404

I'm having this bizzare issue in my php script that i cannot figure out at all. Essentially i have a form handler, that will include the correct template part based on a hidden value from the previ...

Java multi-clients server socket getting errors

java multithreading sockets networking

I've tried making a simple server to accept multiple sockets &amp; then let them input and receive an output.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.