Simple jQuery fadeIn fadeOut animation - How to show / hide DIVS?

Question

SCENARIO: Have 2 links inside a list of ul, li: MY INFO and LOG IN One link must show a box (with fadeIn animation ) with a form inside when used HOVER on the link. Other link shows a button inside a box (with fadeIn animation) when you HOVER on the link.

The form must fadeOut when user MOUSEOUT of the link "LOG IN" OR mouseout of the form. The box with button, must fadeOut when user MOUSEOUT of the link "MY INFO" OR mouseout the box.

PROBLEM (same for both): The form disapears when MOUSEOUT link MY INFO. The button inside the div disapears when MOUSEOUT link LOG IN.

NOTE: 1/The form MUST BE VISIBLE WHEN MOUSE IS ON THE LINK OR ON THE FORM 2/The box with button MUST BE VISIBLE WHEN MOUSE IS ON THE LINK OR ON BOX with button

REFERENCE: check www.conforama.fr on the very-top of the screen, link is "Compte" with an icon, it has a class: "with-hover-menu" . When you mouseover it, the form appears. When you mouseout the link OR the form, the form disapears. I need the same but with fadeIn.

Right now you can look at the code below in this jsfiddle: http://jsfiddle.net/75HYL/19/ but it doesnt work at all. I don't know how to achieve this. Would like to understand and learn...!!

<ul class="links">
    <li class="classA"><a><span>My info</span></a></li>
    <li class="classB"><a><span>Log in</span></a></li>
</ul>

<div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE<br/>
    <input type ="button" value="OKAY"/>
    <div id="login" >
        <div class="form">
            <form>
                <input type="textfield" value="enter your email"></input>
                <input type="checkbox"><option>remember me? </option><input>
                <input type="button" value="Click me"/>
            </form>
        </div>
    </div>
</div>
<style>
    .links li { display:inline-block;cursor:pointer; }
    .links li { padding:0 4px 0 1px; }
    .links li.classA {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
    .links li.classB {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
    .links li.classA span {}
    .links li.classB span {}
    .links li.classA:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
    .links li.classB:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
    .links li.classA a {color:#fff;text-transform:uppercase;background:#00aaff;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
    .links li.classB a {color:#00aaff;text-transform:uppercase;background:orange;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
    #login {display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
    #userInfo{display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
</style>

<script>
    $("li.classA").hover(function() {
        $("#userInfo").fadeIn('fast').css('display', 'block');
    });
    $("#login, .classA").mouseleave(function() {
        $("#userInfo").fadeOut('fast').css('display', 'none');
    });

    $("li.classB").hover(function() {
        $("#login").fadeIn('fast').css('display', 'block');
    });
    $("#login, .classA").mouseleave(function() {
        $("#login").fadeOut('fast').css('display', 'none');
    });
</script>

Answer 1

This is what you want?

http://jsfiddle.net/WcUFe/3/

I've only altered the js, to be easier to see the differences. For an easier life the cssand/or html should be altered, and all the code could be put in a separate plugin, that will control the whole show.

Basically i use a timer to allow the user ~100ms to move the mouse from the LI element to the displayed container.... all the rest is cruft to maintain the state and to make sure we never have the 2 containers visible at any moment.