当快速移动鼠标时,Jquery悬停会触发两个处理程序

时间:2010-11-30 21:02:20

标签: jquery hover performance

鼠标快速移动(一如既往,仅在IE中)两个悬停处理程序都会被触发,因此不会出现任何内容。 我尝试使用hoverIntend,但该插件与e.pageX / Y混淆 任何想法如何解决,我5小时后没有成功。

yOffset = 10;
xOffset = 30;      

$("img.hover-preview").hover(function(e){
//alert('hover');

this.t = this.title;
this.title = "";  
var c = (this.t != "") ? "<br/>" + this.t : "";

preview_link = $('#' + this.id + '-url').attr('src'); //Get the src of the bigger preview image   
zoom_link = $('#' + this.id + '-url-zoom').attr('src'); //Get the src of the ZOOM image   

//Output of the preview element
$("body").append("<div id='hover-preview-active'><img src='"+ preview_link +"' alt='Loading Image Preview' /><span>"
                 + Drupal.t("Press and hold Z key to zoom") + "</span></div>");    

$("#hover-preview-active")
  .css("top", (e.pageY - yOffset) + "px")
  .css("left",(e.pageX + xOffset) + "px")
  .fadeIn("fast");
},

function(){
  this.title = this.t;  
  $("#hover-preview-active").remove();
});   

1 个答案:

答案 0 :(得分:0)

您可以在悬停功能中执行此操作:

function(){
  if($("#hover-preview-active").is(":animated"))
      return;

  this.title = this.t;  
  $("#hover-preview-active").remove();
});

如果#hover-preview-active在调用它时动画,那么将停止执行该功能。