jQuery::when I use fadeIn() my page moves its focus!

Question

Hello.

I have a simple HTML page, and some javascript using the basic $(#element).fadeOut method from jQuery on mouseover event. I also use the $(#element).hide() method.

But my page focus shifts up! Meaning: if I scroll down a bit, and mouseover the element (which toggles the script), script is executed well, but my scroller goes up immediately and I lose where I had scrolled to.

How can I fix this?

Here's my code:

function swapElements(unfadeElement, how, callbackExecute)
{
    if (unfadeElement==swapper.active)
    return;

    if (how!="slow" && how!="fast")
    return;

    var fadeElement=swapper.active;

    $("#" + fadeElement).hide();
    $("#" + unfadeElement).fadeIn(how,callbackExecute);
    swapper.active=unfadeElement;
}

The fadeIn function:

function fadeInElement(element, how, callbackExecute)
{
    //pre: how is "slow" or "fast"
    if (how!="slow" && how!="fast")
    return;
    $("#"+element).fadeIn(how, callbackExecute);
}

A sample script call:

<a href="javascript: void(0)" onmouseover="fadeIn('carpets','slow',void(0))"> Carpets</a>

EDIT: Added some of the HTML code

  <div id="menuDiv">
....................
                        <div id="menu1" class="menuDivLink">
                        <a href="javascript: void(0)" onmouseover="swapper.fadeIn('carpets','slow',void(0))"> Carpets</a>
                        </div>
                        <div id="menu2" class="menuDivLink">
                        <a href="javascript: void(0)" onmouseover="swapper.fadeIn('rugs','slow',void(0))">Rugs</a>
                        </div>
                        <div id="menu3" class="menuDivLink">
                        <a href="#" onmouseover="swapper.fadeIn('windows','slow',void(0))">Link1</a>
                        </div>
............
</div>

Also, could some of my css cause this problem? Thanks in advance

Answer 1

I tried what you had...(minus the changes to fadeInElement instead of fadeIn) and it works for me. In IE7 and FF3.5+ it stays at the same location as previously scrolled to... I just added br tags to simulate a space, and the page did not scroll on mouseover. Maybe you can post more of your HTML to see if something else could be the problem?

<a href="javascript: void(0)" onmouseover="fadeInElement('carpets','slow',void(0))"> Carpets</a>