Thanks ricardo.
It just got too "buggy" trying to do what I had original wanted so I
ended up just using the "slide" effect to show it, and then the drop
effect to hide it. It gives the same overall appeal but it avoids the
hassle with the popup div being covered.
Thanks again for your help!
For anyone who is interested, my modified code looks like:
// Hover function
$(nowIcon).hover(function(){
// Fade icon & show popup
$(this).fadeTo(outSpeed, outOpacity);
$(nowPopup).show("slide", {direction: "up"},
600);
},function(){
// Un-fade icon & hide popup
$(this).fadeTo(inSpeed, inOpacity);
$(nowPopup).hide("drop", {direction: "down"},
600);
});
Thanks again!
On Oct 20, 10:48 am, ricardobeat <[EMAIL PROTECTED]> wrote:
> 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!
