jquery scrolling ads solve flicker problems caused by absolute positioning of Sub div and overlap of parent div

These two days have done a scrolling advertisement for the demo feature has automatic carousel left and right arrow move navigation point selected picture move effect imitate Sina sports Advertisement

The most difficult problem is that the Sub Div is absolutely positioned in the parent Div mouse into the Sub div system will determine the mouse moved out of the parent Div so it will trigger the sub-div disappear effect disappears because the mouse in the parent Div, so it triggers the child div appearance effect

This will cause the sub-div to disappear in the form of a flashing effect on the web without finding the right solution to the problem I solved this problem by setting the state and JS SetTimeout

Effect

Need to set two states

var arrow = false; Determine if you have entered the arrow area
var Isdiv = false;//Determines if the parent div is entered

Attach key code

1$ ("#content"). MouseEnter (function () {2                 if($ ("#left"). Is (": Animated") | | $ ("#right"). Is (": Animated"))//do not perform mouse-over events when arrows are animated3                 {4                     return false;//prevent the mouse from entering and leaving the animation accumulation5                 }6                 if(Arrow = =true) {//move into div and move in arrows this condition never fires because two areas do not intersect7Alert ("Never Trigger");8$ ("#left"). FadeIn (movetime);9$ ("#right"). FadeIn (movetime);Ten                 } One                 Else{//move into DIV and do not trigger in arrow area normally A$ ("#left"). FadeIn (movetime); -$ ("#right"). FadeIn (movetime); -                 } theIsdiv =true;//Mouse move into Div state -Flag =false;//Stop Carousel -             }); -$ ("#content"). MouseLeave (function () { +                 vart = SetTimeout (A, 1);//a little later executes the event that goes into the arrow area to change the state to manually alter the order of execution of the event itself -                 functionA () { +                     if(Arrow = =true) {//because the arrows are moved into the event arrow area, they do not go away. A$ ("#left"). FadeIn (movetime); at$ ("#right"). FadeIn (movetime); -                     } -                     Else{//move out of DIV and not in Arrow area -$ ("#left"). FadeOut (movetime); -$ ("#right"). FadeOut (movetime); -                     } inIsdiv =false; -                 } toFlag =true; +             }); -  the$ ("#left"). MouseOver (function () { *Arrow =true; $Flag =false;Panax Notoginseng$ ("#left"). CSS ("background-position", " -10px-65px")); -$ ("#left"). CSS ("cursor", "pointer");  the             }); +$ ("#left"). Mouseout (function () { A$ ("#left"). CSS ("background-position", " -10px-5px")); the                 vart = SetTimeout (A, 1);//let the div's mouseover execute first to fetch the value of Isdiv +                 functionA () { -                     if(Isdiv = =false) {//move out of the arrow area without the arrows in the div disappear $$ ("#left"). FadeOut (movetime); $$ ("#right"). FadeOut (movetime); -                     } -                 } theArrow =false; -Flag =true;Wuyi             }); the$ ("#right"). MouseOver (function () { -Arrow =true WuFlag =false; -$ ("#right"). CSS ("background-position", " -10px-65px")); About$ ("#right"). CSS ("cursor", "pointer"); $             }); -$ ("#right"). Mouseout (function () { -$ ("#right"). CSS ("background-position", " -10px-5px")); -                 vart = SetTimeout (A, 1); A                 functionA () { +                     if(Isdiv = =false) { the$ ("#left"). FadeOut (movetime); -$ ("#right"). FadeOut (movetime); $                     } the                 } theArrow =false; theFlag =true; the});

The first time in the blog park to write articles do not know how to write a good bad things have a first time

jquery scrolling ads solve flicker problems caused by absolute positioning of Sub div and overlap of parent div