我遇到堆积事件的问题。我有一个大图标矩阵,当我鼠标悬停其中一个时,文本框向下滑动。对于第一次尝试,一切都很棒,但是如果我再次鼠标移动并再次鼠标悬停在同一个对象上 - 事件发生碰撞,框会向上滑动或从不显示,箭头指针消失等等。我试图放一个警报,我越多鼠标悬停在同一个对象上我得到的警报越多(3个鼠标悬停= 3个警报)。
这是我的HTML:
<div class="app">
<a href="#appinfo-1"><img src="images/app001.png" alt="" /></a>
<div class="apparrow"></div>
<div id="appinfo-1" class="appbody">
<div><img src="images/apptop.png" alt="" /></div>
<div class="appwrapper">
<div class="leftappborder"></div>
<div class="appcontent">
<h1>Web Based Administration (CMS)</h1>
<p class="apptext">Lorem ipsum dolor sit amet. </p>
<p class="incltick">Included</p>
</div>
<div class="rightappborder"><!-- --></div>
</div>
<div><img src="images/appbottom.png" alt="" /></div>
</div>
</div>
这是我的jQuery:
$(function(){
$(".app > a").mouseover(function() {
//some code deleted here
var currentactive = $(this).attr("href");
// activate|deactivate infoblock
$(currentactive).parent(".app").hover(
function() {
$(currentactive).queue(function() {
$(this).siblings(".apparrow").slideToggle(150);
$(this).css({"visibility":"visible"}).slideToggle(800, incltick);
$(this).dequeue();
});
},
function() {
$(currentactive).queue(function() {
$(this).css({"visibility":"hidden"}).slideToggle(800, incltick);
$(this).siblings(".apparrow").slideToggle(150);
$(this).parent(".app").animate({marginBottom:0 +"px"}, 800, defaultState);
$(this).dequeue();
});
}
);
}
});
});
答案 0 :(得分:0)
您正在呼叫的mouseover
$(currentactive).parent(".app").hover(...
内部。
这意味着每次将鼠标悬停在附加的hover
上时。因此,如果您鼠标移动3次以上,则会获得3 hover
秒并且事件会触发3次。您不应将事件附加到将再次触发的其他事件中。如果你真的需要,那么设置一个标志并确保它只被连接一次。