jQuery的鼠标悬停鼠标移出删除设置变量

我使用以下从一个区域地图上悬停的jQuery的另一个页面中引入图片和一些文本。当你悬停时，我已经找到了它的工作原理，但是当你将鼠标悬停在新元素上时，它会加载最后一个元素，然后快速弹出新元素。如何清除鼠标上保存的内容？我已经添加了鼠标输出功能，但我不知道该如何放置它！任何帮助都感激不尽。jQuery的鼠标悬停鼠标移出删除设置变量

if (sPage == "fireplan.aspx") { 
    jQuery('area').mousemove(function (e) { 

     var url = jQuery(this).attr('tooltiphref'); 

     jQuery('#tooltipwindow').load('tooltip.aspx?soid=' + url); 
     jQuery("#tooltipwindow").css("position", "fixed").css("top", (e.pageY - jQuery(window).scrollTop()) + "px").css("left", (e.pageX) + "px").css("display", "none").fadeIn("fast") 
    }); 

    jQuery('area').mouseout(function() { 



    }); 


}

谢谢，汤姆

来源

2012-02-28 TMB87

的原因“闪烁”，是因为旧内容仍然提示窗口中，当它运动，因为你到的通话将需要一段时间相比，通过.css()下一行移动工具提示。

为了避免这种情况，简单地说喜欢你mouseout处理程序中执行以下操作：

jQuery('#tooltipwindow').empty()

这将删除哪些以前装入的提示，因此它的内容将只显示为空白。一种更理想的方法是插入某种活动的指标，以让用户知道加载内容，如：

jQuery('#tooltipwindow').html('<div class="activityIndicator"></div>')

在这种情况下，您只需设置类.activityIndicator有一些背景图像，就像一个纺车的动画GIF。

来源

2012-02-28 12:04:54 maxedison

这似乎是合乎逻辑的答案，然而从突出代码的鼠标似乎一直运行，并仍然在新图片之间闪烁:( – TMB87 2012-02-28 13:07:23

有机会我可能已经错过了或类似的重新写这似乎再次工作，谢谢 – TMB87 2012-02-28 13:10:16

显示自负载的成功回调的提示，你知道你的新内容已经显示工具提示之前加载的方式。

jQuery('#tooltipwindow').load('tooltip.aspx?soid=' + url, function() { 
    jQuery("#tooltipwindow").css("position", "fixed").css("top", (e.pageY - jQuery(window).scrollTop()) + "px").css("left", (e.pageX) + "px").css("display", "none").fadeIn("fast")  
});

另外，如果你想创建一个悬停效果，你可能想监听鼠标悬停事件，而不是您正在使用知道与mousemove()方法鼠标移动事件。

来源

2012-02-28 12:01:50

虽然这将解决当前的“闪烁”的问题，它会产生一个可怕的UI因为它似乎对用户没有反应。 – maxedison 2012-02-28 12:05:26

你只想影响第一个div吗？如果是这样，你为什么不使你的jQuery选择更具体的，这样它仅适用于第一个元素：

$('area.first_area').mousemove(function(){ });

来源

2012-02-28 12:06:15 hohner

jQuery('area').mousemove(function (e) { 

    var url = jQuery(this).attr('tooltiphref'); 
    jQuery('#tooltipwindow').empty(); // empty before loading new content 
    jQuery('#tooltipwindow').load('tooltip.aspx?soid=' + url); 

    jQuery("#tooltipwindow").css("position", "fixed").css("top", (e.pageY - jQuery(window).scrollTop()) + "px").css("left", (e.pageX) + "px").css("display", "none").fadeIn("fast") 
}); 


jQuery('area').mouseout(function() { 
    jQuery('#tooltipwindow').empty(); // empty when mouseout get triggered 
});

来源

2012-02-28 13:07:40 Diode

jQuery的鼠标悬停鼠标移出删除设置变量

回答

相关问题