Raphael SVGマップでスムーズにスワップする方法

Question

Raphael.jsによって生成された米国のSVGマップがあります。状態をクリックすると、マップを含むdivがフェードアウトし、状態に関する情報を含むdivに置き換えられます。状態情報を含むdiv内のリンクは、divを含むマップを戻す必要があります。私の問題は、地図と50州の区画に切り替える最良の方法を考え出すことです。ここで

<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> 

にスワップされた状態を制御するためにラファエルの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; 
}) 

これを：ここで私はマップに戻るために使用していたスクリプトとHTMLです。機能的ですが、アニメーションは私が探しているものではありません。ディビジョンは移動して周囲のコンテンツを移動します。私はdivを互いにスムーズに置き換えるためにこれを行うためのよりきれいな方法があると感じています。助言がありますか？

Answer 1

1つのコンテナdivに50個の状態マップdivをすべて配置し、透明度を0に戻します。これは、1つのdivをアニメーション化するだけで済むため、ブラウザではあまり効果がありません。それを隠す代わりに透明にする（display：noneを設定する）ことは、他のコンテンツが動き回らないようにページ上のスペースを占有することを意味します。

Answer 2

この目的のために構築された良いJavaScriptライブラリを使ってSVG DOMを操作する方が簡単です jQueryはDOMですばらしいことをすることができますが、マップと組み合わせて使用​​しないでください。おそらく、あなたは再設計する必要がありますか？ ラファエルの州の下にある州の境界の下にある州の情報を持つことを検討しますか？ユーザーが状態を移動するにつれて、不透明度が0になって状態情報が表示されます。 これはあなたの仕様の中にあったと考えるのは愚かなことでしょう 下記の2つのデモをご覧ください。 www.irunmywebsite.com/jQuery/additionaljQHelp.php?q=animation.faq3r

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

は、それが助けと希望します関連性があった