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的鼠標懸停鼠標移出刪除設置變量

回答

相關問題