jQuery::when I use fadeIn() my page moves its focus!
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
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>
Try using .animate() instead of fadeIn, something like
.animate({ opacity: 1 }, 300, callBackFunction);
精彩评论