This helps a bit, but there are still many problems.. your best bet is
to avoid covering the button with the popup:
// Make icon fade
$(nowIcon).mouseover(function(){
if ( !$(nowPopup).is(':visible') ) {
$(this).fadeTo(outSpeed,
outOpacity);
$(nowPopup).show("drop",
{direction: "up"}, 600);
}
});
// Un-fade icon
$(nowIcon).mouseout(function(){
if ( !$(nowPopup).is(':animated') ) {
$(this).fadeTo(inSpeed, inOpacity);
$(nowPopup).hide("drop",
{direction: "down"}, 1000);
}
});
- ricardo
On Oct 19, 11:44 pm, QuickScriptz <[EMAIL PROTECTED]> wrote:
> 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!
