Using jQuery with Raphael

2019-02-10 21:22发布

站内问答 / jQuery
1677 1 4

I have created an image map with Raphael. I want the div containing the Raphael canvas to fade out using jQuery when one of the paths in the image map (path10 in the example below) is clicked. The code below does not work, but am I on the right track?

<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var R = Raphael("canvas", 1050, 550);
        var attr = {
            fill: "#bbb",
            "fill-opacity": 1,
            stroke: "#222",
            "stroke-width": 0.3,
            "stroke-linejoin": "round"
        };
        path10 = R.path("m 221.63509,150.81487 97.24682,0 0,89.68452 -97.24682,0 0,-89.68452 z").attr(attr);
    };

    path10.node.setAttribute("id","barry");

    $(document).ready(function(){
        $("#barry").click(function(){
            $("#canvas").fadeOut();
        });
    });

</script>

<body>
    <div id="canvas"></div>
</body>

1条回答
smile是对你的礼貌
2楼-- · 2019-02-10 21:47

Almost there... this works (tested on Firefox 3.6.8):

<body>
<script type="text/javascript" charset="utf-8">
    $("document").ready(function() {
        var R = Raphael("canvas", 1050, 550);
        var attr = {
            fill: "#bbb",
            "fill-opacity": 1,
            stroke: "#222",
            "stroke-width": 0.3,
            "stroke-linejoin": "round"
        };
        path10 = R.path("m 221.63509,150.81487 97.24682,0 0,89.68452 -97.24682,0 0,-89.68452 z").attr(attr);
        path10.node.setAttribute("id","barry");

        $("#barry").click(function(){
            $("#canvas").fadeOut();
        });     
    });

</script>

<div id="canvas"></div>
</body>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)