[jQuery] Only Fire Mouseover If Not Already Active
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!