Ich habe eine SVG-Karte der USA von Raphael.js generiert. Wenn Sie auf einen Status klicken, sollte das div, das die Karte enthält, ausgeblendet und durch ein div mit Informationen zum Status ersetzt werden. Ein Link im div, der die Statusinformationen enthält, sollte die Karte mit dem div zurückbringen. Mein Problem ist herauszufinden, die beste Methode zum Zurückschalten auf die Karte und die 50 State Divs. Hier ist der HTML mit dem Skript, das ich auf die Karte zurückzukehren bin mit:Wie man Divs reibungslos in Raphael SVG Map
<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>
Hier ist die Funktion, die in dem Raphael Javascript ist, um den Zustand zu steuern, die in ausgelagert wird
.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;
})
Dies. ist funktional, aber die Animation ist nicht das, was ich suche. Die divs sind shifty und bewegen umgebenden Inhalt herum. Ich habe das Gefühl, dass es einen saubereren Weg gibt, dies zu tun, damit sich die divs reibungslos gegenseitig ersetzen. Irgendwelche Vorschläge?