jQuery .animate() 和 .hover() 停止工作（使用 Raphael js）答案

【问题标题】：jQuery .animate() and .hover() stop working (with Raphael js)jQuery .animate() 和 .hover() 停止工作（使用 Raphael js）
【发布时间】：2012-03-02 22:25:43
【问题描述】：

我正在尝试编写基于 Raphael js 的地图页面。几乎完成了，除了一个问题：如果我使用选择框为某些路径设置动画，则 jquery.hover() 和 jquery.click() 函数将停止工作。

我已经用 Firefox 和 chrome 进行了测试。动画结束后，路径周围的边框变为黑色而不是白色。

有什么办法解决这个问题吗？

附：我也欢迎其他改进脚本的想法

jQuery(function($){
    window.R = new ScaleRaphael('map', 400, 502);

    function resizePaper(){
      var win = $(this);
      window.R.changeSize(win.width()*0.8, win.height()*0.8, false, false);
    }
    resizePaper();
    $(window).resize(resizePaper); 

    R.safari();
    var label = R.popup(0, 0, "").hide();
    attr = { fill: '#898989', stroke: '#FFFFFF', 'stroke-width': 2, 'stroke-linejoin': 'round' }
    arr = new Array();
    for (var item in paths) {
        var p = window.R.path(paths[item].path);
        arr[p.id] = item;
        p.attr(attr);
        p.hover(function(){
                this.animate({
                    fill: '#8fbf27'
                }, 200);
            bbox = this.getBBox();
            label.attr({text: paths[arr[this.id]].name}).update(bbox.x, bbox.y + bbox.height/2, bbox.width).toFront().show();
        }, function(){
            this.animate({
                fill: attr.fill
            }, 200);
        label.hide();
        })
        .click(function(){
             $.mobile.changePage(paths[arr[this.id]].url, "slideup"); 
        })
    }

});

jQuery(function($){
        //Animate the map based on select

    $('select#select-choice-location').change(function() {
            //Remove coloring from previously selected paths
            for (var key in window.selectedPaths) {
                window.R.path(paths[key].path).animate({
                    fill: attr.fill
                }, 200);
            }

        //Get the location as a string
        var selected = $("option:selected", this).data('location');
        //Initialize a variable attatched to the window object
        window.selectedPaths = {};

        if (selected) {
            //Filter all paths and add those with matching location to selectedPaths
            for (var key in paths) {
                if (paths[key].location == selected)
                    window.selectedPaths[key] = paths[key];
                }
        }
        //Animate every selected path
        for (var key in window.selectedPaths) {
            window.R.path(paths[key].path).animate({
                fill: '#8fbf27'
            }, 200);
        }

    });

});


/* Create vector popup-boxex */
Raphael.fn.popup=function(x,y,text,size){txtattr={font:"12px Helvetica, Arial, sans-serif"}
size=size||5;text=text||"";var res=this.set(),d=3;res.push(this.path().attr({fill:"#333333",stroke:"#333333"}));res.push(this.text(x,y,text).attr(txtattr).attr({fill:"#fff","font-family":"Helvetica, Arial"}));res.update=function(X,Y,WIDTH){X=X||x;Y=Y||y;var mmax=Math.max,mmin=Math.min,bb=this[1].getBBox(),w=bb.width/2,h=bb.height/2,dir=(X-bb.width<15)?3:1,X=(dir==1)?X:X+WIDTH,dx=[0,w+size*2,0,-w-size*2],dy=[-h*2-size*3,-h-size,0,-h-size],p=["M",X-dx[dir],Y-dy[dir],"l",-size,(dir==2)*-size,-mmax(w-size,0),0,"a",size,size,0,0,1,-size,-size,"l",0,-mmax(h-size,0),(dir==3)*-size,-size,(dir==3)*size,-size,0,-mmax(h-size,0),"a",size,size,0,0,1,size,-size,"l",mmax(w-size,0),0,size,!dir*-size,size,!dir*size,mmax(w-size,0),0,"a",size,size,0,0,1,size,size,"l",0,mmax(h-size,0),(dir==1)*size,size,(dir==1)*-size,size,0,mmax(h-size,0),"a",size,size,0,0,1,-size,size,"l",-mmax(w-size,0),0,"z"].join(","),xy=[{x:X,y:Y+size*2+h},{x:X-size*2-w,y:Y},{x:X,y:Y-size*2-h},{x:X+size*2+w,y:Y}][dir];xy.path=p;this.attr(xy);return this;};return res.update(x,y);};

【问题讨论】：

标签： jquery hover jquery-animate raphael

【解决方案1】：

我有一个非常相似的问题。当使用 ScaleRaphael 鼠标事件停止工作。

我用这个创建了我的画布：

paper = new ScaleRaphael( 'div' , width , height );

这不起作用：

element.hover( function , function );

也许使用标准的拉斐尔画布来检验理论。

【讨论】：