jQuery ::当我使用fadeIn()我的页面移动它的焦点!
问题描述:
我有一个简单的HTML页面,以及一些JavaScript使用jQuery上的基本$(#元素).fadeOut方法在mouseover事件上。我也使用$(#element).hide()方法。jQuery ::当我使用fadeIn()我的页面移动它的焦点!
但我的页面焦点转移了!意思是:如果我向下滚动一下,并且将元素(切换脚本)移动,那么脚本执行得很好,但是我的滚动器会立即上升,并且我失去了滚动到的位置。
我该如何解决这个问题?
这里是我的代码:
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;
}
的淡入功能:
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可能会导致这个问题? 在此先感谢
答
我试着你有...(减去fadeInElement
而不是fadeIn
)的变化,它适用于我。在IE7和FF3.5 +中,它保持与之前滚动到的相同位置... 我刚刚添加了br
标签来模拟空间,并且该页面没有在鼠标悬停上滚动。也许你可以发布更多的HTML来查看是否有其他问题?
<a href="javascript: void(0)" onmouseover="fadeInElement('carpets','slow',void(0))"> Carpets</a>
答
尝试使用.animate()而不是淡入,像
.animate({不透明度:1},300,callbackFunction参数);
尽管我讨厌使用它们,但我强迫自己在几个嵌套和排列的div上使用简单的表格。那么, - 它完美的工作 - 重点,重叠,一切。 含义我应该回到关于这些DIV元素的HTML基础知识...... – George 2010-07-17 15:10:57