鼠标翻转/卷展栏上的跳跃（越野车）字形地图图标

在我最初的任务中，在RoelN的帮助下，我能够将南非各省转换为SVG地图并将地图拼凑得很好

我现在需要为我已经开始做的这张地图设置动画，但因为地图都是绝对定位并且彼此重叠，所以当你尝试选择正确的地图时它就会出错。

简单的动画：

• 滚动省，省扩大50％
• 展开当前省份，地图缩放回原始大小。

也许最好的方法是在当前地图处于激活模式时停用所有其他地图？

这是最新的小提琴（aaaaaargh不允许发布Fiddle链接！这么多重复，我在jsFiddle有一个工作版!!!!） 编辑：请参阅下面评论中的jsFiddle链接

这是代码。

 
 
          
 
 
 
 
 
 
 
 
 
 
 
 @font-face { font-family: 'za-provinces'; src:url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.eot'); src:url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.eot?#iefix') format('embedded-opentype'), url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.woff') format('woff'), url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.ttf') format('truetype'), url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.svg#za-provinces') format('svg'); font-weight: normal; font-style: normal; } .maps { position: relative; .mini-map-wrapper { position: absolute; top: 10px; left: 50px; width: 330px; height: 330px; padding:10px; background-color: rgba(255,255,255,0.5);; } .mini-map { width: 100%; height: 100%; margin: 0 auto; background-color: white; position: relative; } } [class^="prov-"], [class*=" prov-"] { font-family: 'za-provinces'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size:8em; color: $corp-blue; } .prov-Western-Cape:before, .prov-Northern-Cape:before, .prov-Free-State:before, .prov-Eastern-Cape:before, .prov-North-West:before, .prov-Mpumalanga:before, .prov-Limpopo:before, .prov-KwaZulu-Natal:before, .prov-Gauteng:before { position: absolute; } .prov-Western-Cape:before { content: "\e600"; bottom: 0; left: 30px; color: green; } .prov-Northern-Cape:before { content: "\e601"; bottom: 84px; left: 14px; color: orange; } .prov-Free-State:before { content: "\e602"; bottom: 51px; left: 114px; color: yellow; } .prov-Eastern-Cape:before { content: "\e603"; bottom: 8px; left: 98px; color: pink; } .prov-North-West:before { content: "\e604"; top: 116px; left: 93px; color: #0f0; } .prov-Mpumalanga:before { content: "\e605"; bottom: 94px; left: 169px; color: brown; } .prov-Limpopo:before { content: "\e606"; top: 80px; right: 62px; color: #87ceeb; } .prov-KwaZulu-Natal:before { content: "\e607"; bottom: 52px; right: 32px; color: teal; } .prov-Gauteng:before { content: "\e608"; top: 126px; left: 154px; color: red; } var provArr = [["prov-Eastern-Cape" , "map-0"], ["prov-Free-State" , "map-1"], ["prov-Gauteng" , "map-2"], ["prov-KwaZulu-Natal" , "map-3"], ["prov-Limpopo" , "map-4"], ["prov-Mpumalanga" , "map-5"], ["prov-North-West" , "map-6"], ["prov-Northern-Cape" , "map-7"], ["prov-Western-Cape" , "map-8"] ]; // first map is eastern cape is current var currProv = provArr[0][2]; // deactivate all maps first function deActivateMaps () { jQuery.each( provArr, function( i, val ) { jQuery( "." + provArr[i][0] ).hover(function(e) { e.preventDefault(); //do other stuff when a click happens }); }); } jQuery (".map-0").slideDown(); //affect only the current map jQuery.each( provArr, function( i, val ) { jQuery( "." + provArr[i][0] ).hover(function() { jQuery(this).css("cursor","pointer"); //jQuery(this).animate({"border":"1px solid red"}, 500); jQuery(this).animate({"color":"#efbe5c","font-size":"12em","left":"600px;"}, 500); // on click load maps jQuery( "." + provArr[i][0] ).click(function() { jQuery("." + currProv).hide(); jQuery("." + provArr[i][3]).show(); currProv = provArr[i][4]; }); }, function() { jQuery(this).animate({"font-size":"8em","z-index":"1"}, 500); //deActivateMaps (); }); });