JQuery Fading Problem

Question

I have a menu which has 8 pictures and I want to write a fade effect for them. I want to show the name of the menu when the mouse goes over it, and hide it when mouse goes out. Here is my code for two of my menu items:

$(".menu_account").mouseover(function(){
    $("#menu_name").html('first');
    $("#menu_name").fadeIn('slow', function(){
     $(".menu_account").mouseout(function(){
      $("#menu_name").fadeOut('slow', function(){});
     })
    });
});

$(".menu_myposts").mouseover(function(){
    $("#menu_name").html('second');
    $("#menu_name").fadeIn('slow', function(){
     $(".menu_myposts").mouseout(function(){
      $("#menu_name").fadeOut('slow', function(){});
     })
    });
});

My problem is when I am on the first item and the name has been appeared, when I move the cursor to the second item before the first fades out, the name's innerHTML changes and it gets ugly. I want to wait for fading out to be completed and start again. I really appreciate any help. thanx.

Here is my full code: HTML :

<div id="menu">
                <a class="menu_account"></a>
                <a class="menu_myposts"></a>
                <a class="menu_allposts"></a>
                <a class="menu_favorites"></a>
                <a class="menu_follow"></a>
                <a class="menu_logout"></a>
                <a class="menu_help"></a>
                <a class="menu_contact"></a>
            </div>

<div style="height:20px;width:200px;margin:0 auto;text-align:center;">
                    <div id="menu_name" style="font-size:30px;color:#A1A1A1;display:none;"></div>
                </div>

JS :

$("#menu").ready(function(){

$(".menu_myposts").hover(
    function () {
         $("#menu_name").html('first');
         $("#menu_name").fadeIn('slow', function(){});
    },
    function () {
        $("#menu_name").fadeOut('slow', function(){});
    }
);

$(".menu_myposts").hover(
    function () {
        $("#menu_name").html('second');
        $("#menu_name").fadeIn('slow', function(){});
    },
    function () {
        $("#menu_name").fadeOut('slow', function(){});
    }
);
});

Correct JS:

$(".menu_item").hover(
        function() {        
            $("#menu_name").html($('#' + this.id + '_name').html());
            $("#menu_name").stop(true, true).fadeIn();
        }, 
        function() {
            $("#menu_name").stop(true, true).fadeOut();
        }
    );

Answer 1

I've created a Fiddle that might be interesting. It is similar to the one in this post with the difference that the names of the menu items are created on the fly.

The code from the fiddle:

$("#menu li").hover(
    function() {
        if (!$(this).data("name")) {
            $(this).data("name",
                $('<div class="name"></div>')
                    .text($(this).text())
                    .hide()
                    .appendTo("#nameWrapper"));
        }

        $(this).data("name")
            .stop(true, true)
            .fadeIn();
    }, 
    function() {
        $(this).data("name")
            .stop(true, true)
            .fadeOut();
    }
);

The idea is to have a name element for every menu item so you get a nice fade effect when the old name fades out and new one fades in at the same time.

The first part of the first hover function creates a name element if there isn't one. The element is connected with the menu item using the data() function.

The second part of the first hover function just fades in the name element. The second function fades it out.

The trick here is to use stop(true, true) to stop all animation on the element.

EDIT:

You start with a html structure like this one:

<ul id="menu">
    <li>First</li>
    <li>Second</li>
</ul>
<div id="nameWrapper"></div>

And after a couple of mouseover's over the menu items the nameWrapper div gets filled like so:

<div id="nameWrapper">
    <div class="name">First</div>
    <div class="name">Second</div>
</div>

The div.name elements is what actually gets shown when you hover over the menu items. The div.name elements are created when you hover over the menu item for the first time, in the folowing code section:

$(this).data("name",                    // associate the <div class="name"> element with the menu item that is currently hovered - $(this)
    $('<div class="name"></div>')       // create a div element
        .text($(this).text())           // set text inside div to text of the menu item
        .hide()                         // hide the div (it gets faded in later)
        .appendTo("#nameWrapper"));     // append the element to the element with id nameWrapper

Answer 2

Here is a JSFiddle I made that kind of simplifies all the JS into one hover listener: Example here

[EDIT] updated to auto load the menu title container...

Code to example:

CSS

#menu_name div{
    position:absolute;
    display:none;
}

.menu_link{
    cursor:pointer;
}

HTML

<div id="menu_name"></div>
<br/>
<div id="menu_account" class="menu_link">link 1</div>
<div id="menu_myposts" class="menu_link">link 2</div>

JavaScript

(function() {
    //auto-load the menu title container...
    $(".menu_link").each(function(index, item) {
        $('#menu_name').append('<div id="' + item.id + '-title">' + item.innerHTML + '</div>');
    });

    $(".menu_link").hover(
        function() {
            $('#' + this.id + '-title').fadeIn('medium');
        }, function() {
            $('#' + this.id + '-title').fadeOut('medium');
    });
})();

Answer 3

I guess the mouseout event should be defined outside like this:-

$(".menu_account").mouseover(function(){
    $("#menu_name").html('first');
    $("#menu_name").fadeIn('slow', function(){
    });
});

 $(".menu_account").mouseout(function(){
  $("#menu_name").fadeOut('slow', function(){});
 })

That's why the fadeout happens immediately.

You could reuse the code like this :-

var menuClasses = {'menu_account' : 'first', 'menu_classes' :'second'};

$.each(menuClasses function(index, value) { 
   $("."+value).hover(dothisOnMouseover(value), dothisOnMouseout())
});

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

function dothisOnMouseover(value)
{
        $("#menu_name").html(value);
        $("#menu_name").fadeIn('slow', function(){});
}

function dothisOnMouseout()
{
        $("#menu_name").html('');
        $("#menu_name").fadeOut('slow', function(){});
}

Updates
The solution is to somehow check inside dothisOnMouseout() if the fadeIn() has completed already. But I don't know how to do that. So, I have this other trick to enable mouseover only if fadeOut() is complete -

function dothisOnMouseover(value)
{
        //Remove the `onmouseover="dothisOnMouseover()" binding of all other menus here - or may be all menus - check it.
        $("#menu_name").html(value);
        $("#menu_name").fadeIn('slow', function(){
           //On completion of this fade in attach back the `onmouseover="dothisOnMouseover"` event binding all other menus here - Note - do not call `dothisOnMouseout()` here
        });
}

Doing so, if you hover on any menu before the fadeOut() completes, nothing will happen. try it out.

Answer 4

Edit: See this jsFiddle code

I would bind all your menu items at once with a class name with an id attached to each one, like (I'm just guessing your HTML structure here):

<ul id="menu">
    <li class="menu-item" id="account">Account</li>
    <li class="menu-item" id="myposts">My Posts</li>
</ul>

And your javascript might be something like the below. Keep in mind that it's untested though, and I'm not sure what effect it would have on performance.

bindMouseOver();
$('.menu-item').mouseout(function(){
    $('.menu-item').unbind('mouseover'); //disable all mouseovers while fadeOut is happening
    $("#menu_name").fadeOut('slow', function(){
        bindMouseOver(); //rebind the mouseover event after the fadeOut is completed
    });
});
var bindMouseOver = function(){
    $('.menu-item').mouseover(function(){
        $("#menu_name").html($(this).html()); //use the menu item's innerHTML text, or something else if you prefer
        $("#menu_name").fadeIn('slow');        
    });
};