JQuery animate() на Chrome 37.0.2062.120 м /Webkit?

Это мой первый вопрос здесь о СО, так что несите меня. Я разрабатываю небольшой проект, и недавно я обнаружил одну конкретную проблему, которой у меня не было раньше.

В моем проекте у меня есть небольшая карта, используемая для выбора разных регионов моей страны, Румыния. Я реализовал это с помощью библиотеки Raphael.js и jQuery/UI. Это выглядит так:

http://s28.postimg.org/pzg3gaiod/output_Cuap_Ye.gif

Идея заключается в том, что вы выбираете регион, который динамически окрашивается и добавляется в вектор регионов. Просто. Поэтому для каждого региона (который объявлен как путь библиотеки Рафаэля к пониманию и рисованию) у меня есть небольшая функция:

function clickableMinimapRegions(st, regio) {
 st[0].style.cursor = "pointer";
 st[0].onclick = function () {
 if ($.inArray(regio, regions) != -1) {
 regions.splice($.inArray(regio, regions), 1);
 st.animate({
 fill: "#FFFFFF"
 }, 0);
 } else {
 regions.push(regio);
 st.animate({
 fill: "#******"
 }, 0);
 }
 };
}

Тогда у меня есть этот HTML:

<ul>
 <li>
 <a id="toggle" target="_blank">
 
 </a>
 <div id="content" data-role="dropdown">
 
 </div>
 </li>
</ul>

Я использую библиотеку Metro UI CSS, это простое раскрывающееся меню. Но это поведение - автоклинирование при нажатии. Поэтому для этого я сделал:

$("#minimap").click(function (event) {
 event.stopPropagation();
});

http://s28.postimg.org/trltqsu19/Captura3.png

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

Спасибо.

РЕШЕНИЕ НАЙДЕНО:переименование/обновление Force DOM на Chrome/Mac

1 ответ

Второй параметр в jQuery .animate() - это длительность в миллисекундах. Установив его в 0, я бы сказал, что поведение, которое вы видите в других браузерах, неверно, и вы должны ожидать, что свойство изменится сразу без анимации.

st.animate({
 fill: "#FFFFFF"
 }, 0);
 // ^---- duration

Попытайтесь изменить это на большее значение (по умолчанию используется 400 мс)

Здесь скрипка, показывающая разницу: http://jsfiddle.net/exrj973b/

licensed under cc by-sa 3.0 with attribution.