Question

我有Raphael.js生成的美国SVG地图。单击某个状态时，包含该映射的div应淡出并替换为包含该状态信息的div。 div中包含状态信息的链接应该带回包含div的地图。我的问题是找出切换回地图和50个状态div的最佳方法。这是带有我用来返回地图的脚本的HTML：

<div id="map-container">
   <div id="map"></div>
</div>

<div class="state" id="alabama">
   <a href="#" class="return">Go Back To Map</a>
   <p>Some Content</p?
</div>
<div class="state" id="alaska">
   <a href="#" class="return">Go Back To Map</a>
   <p>Some Content</p?
</div>
<div class="state" id="arizona">
   <a href="#" class="return">Go Back To Map</a>
   <p>Some Content</p?
</div>
... every other state

<script>
$(".return").click(function() {
  $(".state#" + callMe).fadeOut(500).hide(1000);
  $("#usmap").show(1000).fadeIn(500);
 });
</script>

这是Raphael javascript中用于控制交换状态的函数。

.click(function(){
  document.location.hash = arr[this.id];
  callMe = area[arr[this.id]].name;
    $("#usmap").first().fadeOut(500).hide(1000, function showState() {
  $(this).next(".state#" + callMe).show(1000).fadeIn(500, showState);
});
  return false;
})

这是功能性但动画不是我想要的。 div很狡猾，可以移动周围的内容。我有一种感觉，有一种更清洁的方法来做到这一点，以便div平滑地互相替换。有什么建议吗？

Answer 1

我会将所有50个状态映射div放在一个容器div中，并将其透明度淡化为0.这对浏览器的工作量会减少，因为它只需要为一个div设置动画。使其透明而不是隐藏它（设置display：none）意味着它仍然占用页面上的空间，以便其他内容不会移动。

Answer 2

使用为此目的而构建的优秀JavaScript库来操作SVG DOM将是一件更容易的任务 jQuery可以使用DOM做很棒的事情，但不应该与Maps一起使用。也许你需要重新设计？你是否会考虑在Raphael绘制的国家边界内的Div中获得国家信息。当用户悬停状态时，不透明度动画为零，显示状态信息？考虑到这是在你的规范范围内是愚蠢的去看看下面的2个演示，这可能会有所帮助吗？

www.irunmywebsite.com/jQuery/additionaljQHelp.php?q=animation.faq3j

www.irunmywebsite.com/jQuery/additionaljQHelp.php?q=animation.faq3r

希望它有所帮助并且相关。

如何在Raphael SVG Map中顺利交换Div

2 个答案: