Question

我正在尝试基于Raphael js编写地图页面。它几乎完成了，除了一个问题：如果我使用select-box来动画一些路径，那么jquery.hover（）和jquery.click（）函数就会停止工作。

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

任何想法如何解决这个问题？

P.S。我也欢迎其他想法来改进剧本

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);};

Answer 1

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

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

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

这不起作用：

element.hover( function , function );

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

jQuery .animate（）和.hover（）停止工作（与Raphael js）

1 个答案: