悬停太慢

Question

由于 jQuery 的 hover() 函数，我的 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

我强烈推荐使用原生 Javascript，而不是使用 Raphael 制作工具提示框。浮动元素可以更好地处理样式和环绕文本之类的事情。

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 调用：似乎非常不明智。你能提前加载鼠标悬停的文本吗？