Как плавно поменять местами дивы на карте Raphael SVG - PullRequest
Новая
       9

Как плавно поменять местами дивы на карте Raphael SVG

0 голосов
/ 30 марта 2012

У меня есть карта США в формате SVG, созданная Raphael.js.Когда вы щелкаете по состоянию, элемент div, содержащий карту, должен исчезать и заменяться элементом div, содержащим информацию о состоянии.Ссылка в div, содержащая информацию о состоянии, должна вернуть карту, содержащую div.Моя проблема состоит в том, чтобы найти лучший способ переключиться обратно на карту и разделить 50 состояний.Вот 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>

Вот функция, которая есть в JavaScript-коде Raphael для управления состоянием, в котором происходит обмен.

Это функционально, но анимация не то, что я ищу.Дивы изменчивы и перемещают окружающий контент.У меня есть ощущение, что есть более чистый способ сделать это, чтобы div плавно заменяли друг друга.Есть предложения?

Ответы [ 2 ]

0 голосов
/ 31 марта 2012

Было бы проще управлять SVG DOM хорошей библиотекой JavaScript, которая была создана для этой цели. JQuery может делать замечательные вещи с DOM, но не должен использоваться вместе с Maps.Может быть, вам нужно изменить дизайн?Не могли бы вы подумать о том, чтобы иметь информацию о состоянии в Div под th нарисованными Рафаэлем государственными границами.Когда пользователь перемещает состояние, непрозрачность анимируется до нуля, показывая информацию о состоянии?Было бы глупо считать, что это было в вашей спецификации. Посмотрите на приведенные ниже 2 демонстрации, может быть, это может помочь?

www.irunmywebsite.com / jQuery / AdditionaljQHelp.php? Q = animation.faq3j

www.irunmywebsite.com / jQuery / AdditionaljQHelp.php? Q = animation.faq3r

Надеюсь, что это помогло и было актуально.

0 голосов
/ 31 марта 2012

Я бы поместил все 50 делителей карты состояний в один контейнерный div и уменьшил бы его прозрачность до 0. Это было бы меньше работы для браузера, поскольку он должен анимировать только один div.Сделав его прозрачным вместо того, чтобы скрывать его (что устанавливает display: none), он по-прежнему будет занимать место на странице, чтобы другой контент не перемещался.

...