Chrome 37.0.2062.120 m / Webkit 上的 jQuery animate()？

Posted 2023-05-08

【中文标题】Chrome 37.0.2062.120 m / Webkit 上的 jQuery animate()？

【英文标题】：jQuery animate() on Chrome 37.0.2062.120 m / Webkit?

【发布时间】：2014-11-06 15:18:45

【问题描述】：

这是我在 SO 上的第一个问题，请耐心等待。我正在开发一个小项目，最近我发现了一个以前没有遇到过的特殊问题。

在我的项目中，我有一张小地图，用于选择我的国家罗马尼亚的不同地区。我用 Raphael.js 库和 jQuery/UI 实现了这个。它看起来像这样：

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

这个想法是当您选择一个区域时，它会动态着色并添加到区域向量中。简单的。所以对于每个区域（被声明为 Raphael 库理解和绘制的路径）我都有一个小功能：

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: "#e6e6e6"
   , 0);
  
 ;

然后我有这个 html：

<ul class="element-menu drop-up">
 <li>
  <a id="toggle" class="dropdown-toggle bg-lime text-shadow button shadow">
   <img src="../img/regions.png">
  </a>
    <div id="content" class="dropdown-menu bg-steel" data-role="dropdown">
     <div id="minimap" class="minimap"></div>
    </div>
 </li>
</ul>

我使用 Metro UI CSS 库，它是一个简单的下拉菜单。但它的行为是在点击时自动关闭。所以我做到了：

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

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

此菜单位于传单地图上方的屏幕底部，地图为背景，此下拉菜单位于地图上方。问题是，如果未加载地图，则它可以正常工作。如果加载了地图图块，则会发生一些事情，从而阻止在单击时对区域进行着色。

谢谢。

---

找到的解决方案： Force DOM redraw/refresh on Chrome/Mac

【参考方案1】：

jQuery's .animate() 中的第二个参数是持续时间，以毫秒为单位。将其设置为0，我宁愿说您在其他浏览器中看到的行为是错误的，您应该期望属性立即更改而没有动画。

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

尝试将其更改为更大的值（默认为 400 毫秒）

这是一个显示差异的小提琴：http://jsfiddle.net/exrj973b/

【讨论】：

@enr00ted 在旁注中，Raphael's elt.animate()'s docs 说的完全一样

我不得不使用这个，$('#parentOfElementToBeRedrawn').hide().show(0);而且我还更新了我的问题解释，因为现在我怀疑存在重绘/刷新问题。

好吧，this question 引用了那个确切的重绘问题（可能你从哪里得到解决方案？）。如果这解决了您的问题，我建议将其标记为重复或将其添加为此处的答案并包括链接，如果您认为它不够相似而不能重复（它可能对其他人有帮助）跨度>

是的，完全正确。我将链接添加到我的主要帖子。请让我知道这是否应该被引用，并感谢您的所有帮助:)。