将jQuery与Raphael结合使用 [英] Using jQuery with Raphael

查看:107
本文介绍了将jQuery与Raphael结合使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经用Raphael创建了一张图像地图.我希望当单击图像映射中的路径之一(在下面的示例中为path10)时,使用jQuery淡出包含Raphael画布的div.下面的代码不起作用,但是我在正确的轨道上吗?

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>

推荐答案

几乎可以使用...(在Firefox 3.6.8上测试):

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>

这篇关于将jQuery与Raphael结合使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆