Hey, I have a row of icons that each have a mouseover function. I'm using the "drop" animation to produce a popup below each icon on mouseover of the icon. The problem is that the "drop" animation makes the popup flow down over top of the icon and then it stops below the icon.
That being said, while the "drop" animation is happening, the popup covers the icon which in turn makes the page think the user has just "mouseout" and then when the popup stops below the icon, it thinks the user has "mouseover" again. When this all happens, the animation just continually repeats itself over and over. So, I just want to stop the repeat. I've tried some stuff like having a variable for whether the popup is hidden or visible but I just couldn't seem to make it work properly. If anyone could help me out it'd be really appreciated! I know my description may be a bit weak so visit the link below for an example. It's the icons in the top corner and to see what the problem is just mouseover near the bottom of the icons and just leave your mouse there for a bit. Example: http://dev.quickscriptz.ca/v4/ And here is my code: function doFade(i){ // Variables var nowIcon, nowPopup, nowIconPos, topPx, leftPx, topPxS, leftPxS; // Variable for icon id nowIcon = "#icon" + i; nowPopup = "#popup" + i; nowIconPos = $(nowIcon).position(); // Height from top of icon topPx = nowIconPos.top; leftPx = nowIconPos.left; // Popup showing position topPxS = topPx + 70; leftPxS = leftPx + 457; // Position the popups (start as hidden) $(nowPopup).css({position: "absolute", top: topPxS, left: leftPxS}).hide(); // Make icon fade $(nowIcon).mouseover(function(){ $(this).fadeTo(outSpeed, outOpacity); $(nowPopup).show("drop", {direction: "up"}, 600); }); // Un-fade icon $(nowIcon).mouseout(function(){ $(this).fadeTo(inSpeed, inOpacity); $(nowPopup).hide("drop", {direction: "down"}, 1000); }); Any help is greatly appreciated!
