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

A bit like this ? Cleaned up a few syntax errors and change logic a bit

Answer 2

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.

Answer 3

Well your problem is that the mouse currently HAS to leave your links to get to the boxes. Therefore the boxes MUST dissapear for the functionality to work as you have stated above.

A few solutions come to mind (I'm not great with jQuery so there might be better options); 1 is to add a bool and some logic to say if the box has opened and then only listen for mouseout events on the box (rather than the link and the box). And another is to debounce the events so that there's a bit of a time delay before you listen for the mouseout event of the link.

• looks like @AbstractChaos has cleared this up now, as I suspected there is a better option to my suggestions!

Hope this helps.

Answer 4

or

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


$("li.classB").hover(function() {
    $("#userInfo").css('display', 'none');
    $("#login").fadeIn('fast');
});
$("#login").mouseleave(function() {
    $("#login").fadeOut('fast');
});

Answer 5

Try this: http://jsfiddle.net/QR49h/

I moved the divs to be hidden/shown to inside the <li> elements:

<ul class="links">
    <li class="classA"><a><span>My info</span></a>
        <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>
    </li>
    <li class="classB"><a><span>Log in</span></a>
        <div id="login">
            <div class="form">
                <form>
                    <input type="textfield" value="enter your email" />
                    <input type="checkbox" />
                    <option>remember me?</option>
                        <input />
                    <input type="button" value="Click me" />
                </form>
            </div>
        </div>
    </li>
</ul>

I also fixed a bug in the js (ClassA vs ClassB) and fiddled the css slightly so the second <li> item can keep it's position when the first is expanded. Oh and fixed some element closing issues in the form div.