jQuery::当我使用 fadeIn() 时，我的页面会移动焦点！
我有一个简单的 HTML 页面，以及一些在鼠标悬停事件上使用 jQuery 中的基本 $(#element).fadeOut 方法的 javascript。我还使用 $(#element).hide() 方法。
但我的页面焦点向上移动了！意思是：如果我向下滚动一点，并将鼠标悬停在元素上（这会切换脚本），脚本会很好地执行，但我的滚动条会立即上升，并且我会丢失滚动到的位置。
我该如何解决这个问题？
这是我的代码：
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;
}
fadeIn 函数：
function fadeInElement(element, how, callbackExecute)
{
//pre: how is "slow" or "fast"
if (how!="slow" && how!="fast")
return;
$("#"+element).fadeIn(how, callbackExecute);
}
示例脚本调用：
<a href="javascript: void(0)" onmouseover="fadeIn('carpets','slow',void(0))"> Carpets</a>
编辑：添加了一些 HTML 代码
<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>
另外，我的一些 css 是否会导致此问题？ 提前致谢
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我尝试了你所做的...（减去对
fadeInElement而不是fadeIn的更改），它对我有用。在 IE7 和 FF3.5+ 中，它停留在之前滚动到的相同位置...我刚刚添加了
br标签来模拟空间，并且页面在鼠标悬停时没有滚动。也许您可以发布更多 HTML 来看看是否还有其他问题？I tried what you had...(minus the changes to
fadeInElementinstead offadeIn) and it works for me. In IE7 and FF3.5+ it stays at the same location as previously scrolled to...I just added
brtags 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?尝试使用 .animate() 而不是 fadeIn，例如
.animate({ opacity: 1 }, 300, callBackFunction);
Try using .animate() instead of fadeIn, something like
.animate({ opacity: 1 }, 300, callBackFunction);