h太慢

Question

由於jQuery的懸停（）函數，我在我的Raphael畫布上留下了一些文字。當我將鼠標懸停在一個圓上時，我基本上都希望文本出現，然後確保一旦停止在圓上懸停（hoverOut（）），文本就會消失。正如你在下面看到的，我嘗試刪除（）hoverOut（）上的文本，但它沒有完成任務。但是，它可以很好地移除矩形。這與get（）請求花費太多時間有關嗎？

node = paper.circle(value.xpos_init, value.ypos_init, node_rad).attr({"fill": "#ff0000"}) 
     .hover(function(e){ 
       posx = e.pageX - $('#canvas').offset().left; 
       posy = e.pageY - $('#canvas').offset().top; 
       createMenu(posx,posy,"10"); 
       }, 
       function(){ 
       menu.remove(); 
       menu_deg_cent_text.remove(); 
       }); 

function createMenu(x,y,id_in) 
{ 
    menu_x = 100; 
    menu_y = 60; 
    menu = paper.rect(x,y,menu_x,menu_y).attr({"fill":"white","stroke":"red"}); 
    $.get("../php/text.php", {id : id_in}, 
    function(data){ 
    menu_deg_cent_text = paper.text(x+(menu_x/2),y+(menu_y/2),"test_text"); 
    }); 
} 

Answer 1

與其使用Raphael製作工具提示框，我強烈建議使用原生Javascript。浮動元素處理諸如樣式和包裝文本的東西要好得多。

node = paper.circle(100, 100, 50).attr({"fill": "#ff0000"}) 
    .hover(function(e) { 
     //if you want to calculate position by mouse 
     //posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     //posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop-15; 
     posx = this.attr('cx'); 
posy = this.attr('cy') - this.attr('r');   
     document.getElementById("tip").style.top = posy + "px"; 
     document.getElementById("tip").style.left = posx + "px"; 
     document.getElementById("tip").style.display = "block"; 
    }, function(e) { 
     document.getElementById("tip").style.display = "none"; 
}); 

這裏工作演示：http://jsfiddle.net/jLSUa/1/

至於把一個AJAX調用鼠標懸停事件中：似乎非常不明智的。你能提前加載鼠標懸停文字嗎？