Nav input and output DIV attenuation

Question

Hello,

I am trying to make a simple fade in a DIV with text for each button in a navigation bar using jQuery, and I ran into some problems. Here is a screenshot of what I'm trying to do:

In principle, when the user hovers over an item in the navigation panel, an inscription appears with the text associated with this button under the navigation. The markup I came up with so far is horrific, and I know that this is not the right way, I also tried using an array and populating the info div with text from the name attribute of the navigation button - the latter worked fine, but then the title appears.

Besides being too complicated, it really works. If the user quickly hovers over and leaves the navigation panel, it forces it all to turn on and off (without using: hidden and visible) or does not appear if hidden and visible are used.

Here is the current markup:

CSS for div information

#header-info-text { width: 480px; text-align: right; float: right; margin-right: 20px; padding-right: 25px; background: url('/images/info-arrow.png') top right no-repeat transparent scroll; color: #fff; display: none; } 

HTML for navigation

 <div id="navBar"> <ul> <li class="nav-first nav-active"><a href="#">Home</a></li> <li id="navAbout"><a href="#">About</a></li> <li id="navPort"><a href="#">Portfolio</a></li> <li id="navServ"><a href="#">Services</a></li> <li id="navBlog"><a href="#">Blog</a></li> <li id="navContact" class="nav-last"><a href="#">Contact</a></li> </ul> </div> <div id="header-infoDIV"> <span id="header-info-text"></span> </div> 

Javascript

 $("#navBar ul li").hover(function() { var text; var id = $(this).attr('id'); if (id == 'navAbout') { text = 'Learn more ..'; } else if (id == 'navPort') { text = 'View our recent work and ongoing projects'; } else if (id == 'navServ') { text = 'Learn about our services'; } else if (id == 'navBlog') { text = 'View the our Blog'; } else if (id == 'navContact') { text = 'We\'re looking forward to working with you!'; } else { text = ''; } $("#header-info-text").text(text); $("#header-info-text:hidden").fadeIn('slow'); }); $("#navBar ul").hover(function() { $("#header-info-text:hidden").fadeIn('slow'); }, function() { $("#header-info-text:visible").delay(500).fadeOut('slow'); }); 

What is the best way to solve this kind of thing? Basically, I want to disappear in the DIV info text, change its text when the user moves to another button, and hide it when they exit the navigation panel.

Thanks!

SOLUTION (thanks to jmans)

  $("#navBar ul").hover(function() { $("#header-info-text").stop(true,true).fadeIn('slow'); }, function() { $("#header-info-text").stop(true,true).delay(500).fadeOut('slow'); }); 

UPDATE Thanks to the mVChr clause, the code has been reduced to a few lines. Combined with the jmans suggestion, it does what I wanted:

 $("#navBar ul li a").hover(function() { var text = $(this).attr('rel'); $("#header-info-text").text(text); $("#header-info-text").stop(true,true).fadeIn('slow'); }, function() { $("#header-info-text").stop(true,true).delay(500).fadeOut('slow'); }); 

Answer 1

You can try using the stop () method to stop any current animations when the hang state changes:

  $("#navBar ul").hover(function() { $("#header-info-text:hidden").stop(true,true).fadeIn('slow'); }, function() { $("#header-info-text:visible").stop(true,true).fadeOut('slow'); }); 

As well as on another animation call.

Answer 2

I am not getting the flicker you are talking about, is this happening in a specific browser? I tested Chrome and Firefox.

However, I did this script to show you how you can improve your code by separating content from functionality. Basically, if you want to update the status text, a reasonable place to search would be in HTML, not code. In addition, the presence of all these special conditions in the code is not very convenient. Think about whether you want to add or change several menu items.

Instead, I moved the status text to the title attribute of the links in your HTML and got jQuery this attribute to get the text. It also reduces the first 15 lines of your jQuery code to 6 lines:

 $("#navBar ul li a").hover(function() { var text = $(this).attr('title'); var id = $(this).attr('id'); $("#header-info-text").text(text); $("#header-info-text:hidden").fadeIn('slow'); });