javascript - Problem with a jQuery script that sets an active element on hover and animation callbacks -

i working on site in there series of elements, , 1 of them must active @ time. when element active, 'details' div shown.

these elements become active when hover on them, said, 1 of them can active @ same time. setting active element active class.

in current code, happens when user hovers on of elements:

• the previous active element gets class 'active' removed , , fadeout
• on fadeout callback, hovered element becomes active (gets class 'active'), , fadein
• if there no current active element, hovered element becomes active (class 'active') , fadein

this works out ok, when hover between elements, there brief moment no element active, more element gets active class , shown.

how approach problem?

here code:

function setactive(selected) {       //stores active element in variable     active = selected;      //checks if there elements 'active' class in dom     if ( $('#info article.active').length > 0) {          //if there active element, , element_id attribute not 1 stored in active variable         //it gets 'active' class removed, hidden, , in callback of animation         //the newly selected element gets class 'active' , shown fadein          $('#info article.active[element_id!="' + selected + '"]').removeclass('active').fadeout('fast', function(){             $('#info article[element_id="' + selected +'"]').addclass('active').fadein('normal');             });       } else {          //if there no current active element, newly selected 1 applied class active, , shown fadein          $('#info article[element_id="' + selected +'"]').addclass('active').fadein('normal');     } } 

stray (mis)firings on mouse flyovers, and/or finicky targets common problem. standard solution have small delay before hover "sticks".

important: question did not show how setactive() being called!

but if structure html this:

<div id="flyovercontrols">     <ul>         <li rel="article_1">show 111</li>         <li rel="article_2">show 222</li>         <li rel="article_3">show 333</li>         <li rel="article_4">show 444</li>     </ul> </div> <div id="info">     <article id="article_1">first article.</article>     <article id="article_2">second article.</article>     <article id="article_3">third article.</article>     <article id="article_4">fourth article.</article> </div> 

activate controls this:

$("#flyovercontrols li").hover (function (zevent) {setactivearticle (zevent); } ); 

code should trick. adjust speeds taste. personally, i'd kill fade-out.

function setactivearticle (zevent) {     var ddelay;     var actionfunction  = null;     var targetid        = $(zevent.currenttarget).attr ('rel');      if (zevent.type == 'mouseenter')     {         //--- hovering on new article control... pause ergo delay.         ddelay          = 300;         actionfunction  = function (targetid, context) {             //--- if setting same article, nothing needs done here.             if ( ! (context.lastarticle  &&  context.lastarticle == targetid) ) {                 //checks if there elements 'active' class in dom                 if ( $('#info article.active').length > 0) {                      /*  if there active element, , element_id attribute not 1 stored in                         active variable gets 'active' class removed, it's hidden, , in callback of animation                         newly selected element gets class 'active' , shown fadein.                     */                     $('#info article.active').removeclass ('active').fadeout ('fast', function () {                         $('#info article#' + targetid).addclass ('active').fadein ('normal');                     } );                  } else {                     //if there no current active element, newly selected 1 applied class active, , shown fadein                      $('#info article#' + targetid).addclass ('active').fadein ('normal');                 }                 context.lastarticle = targetid;             }         };     }     else //-- zevent.type == 'mouseleave'     {         //--- done hovering, no action needed, other wait, in case of user jitter.         ddelay          = 200;         actionfunction  = function (targetid, context) {             var noop    = 0;         };     }      if (typeof this.delaytimer == "number")     {         cleartimeout (this.delaytimer);     }     context             = this;     this.delaytimer     = settimeout (function() { actionfunction (targetid, context); }, ddelay); } 

see in action @ jsfiddle.