javascript - raphael + mapSvg 淡出

Question

我需要一些帮助，我正在使用 mapSVG在这段代码中，创建了我的国家的 map ，其中每个区域都有自己的路径和自己的id，所以这就是我想要的:

当我点击一个区域时，我需要它与整个国家的 map 一起淡出(1000毫秒)，然后我需要例如500毫秒的延迟，之后只有我点击的区域淡出在(1000 毫秒)内。

我需要它分别适用于每个区域。

<div id="italy" style="margin-left:135px;margin-right:135px;">
            <!-- Here comes map code-->
            <script type="text/javascript">
            $('#italy').mapSvg({
                source: 'maps/italy.svg',
                colors: {
                        base: "#E1F1F1",
                        stroke: "#646464",
                        hover: "#548eac",
                        selected: "#548eac",
                        disabled: "#ffffff",
                    },
                tooltipsMode: 'custom',   
                popover : {width: 300, height: 300},
                cursor: 'pointer',
                zoom: false,
                pan: false,
                responsive: true,
                width: 900,
                height: 600,
                responsive: true,  
                zoomButtons: {'show': false, 
                },
                regions : {
                  'Sicilia'  : {tooltip: 'This is Sicilia'},
                },
                onClick : function(e,m){
                this.animate({opacity: 0}, 1000 );
                }
            });
            </script>
        </div>

Answer 1

我是 mapSVG 的开发者:) 试试这个:

onClick: function (e, m) {
    var rmap = m.getData().RMap;
    var region = this;
    var fadeBack = function () {region.animate({opacity: 1}, 500);};
    rmap.animate({opacity: 0}, 500, fadeBack);
}