jQuery .animate() 只在 Chrome 中动画，在其他浏览器中瞬时变化

Posted 2023-05-08

【中文标题】jQuery .animate() 只在 Chrome 中动画，在其他浏览器中瞬时变化

【英文标题】：jQuery .animate() only animates in Chrome, instantaneous change in other browsers

【发布时间】：2015-12-15 02:05:36

【问题描述】：

我查看了其他帖子，并且有一个涉及“事件”的正在运行的解决方案，但是我看不出它如何适合我的代码。就目前而言，.animate() 函数，更具体地说是持续时间功能，除非我使用 chrome，否则似乎不起作用。

这是我的代码。

index.html

<title>Quests Development Space</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html"; charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>

<div id="circle"></div>

javascript.js

$(document).ready(function() 

    $("#circle").click(function() 

        $(this).animate(
            borderRadius:"0px"
        , 
            duration: 1600
        );

    );

);

我已经尝试过没有“，duration：x”和“，1500”的迭代，因为我已经看到它使用了两种方式，但是除了Chrome之外，它们都不能工作。 该函数将圆形变为正方形，并且在所有浏览器中仍然如此，但它仅在 Chrome 中具有动画效果。

编辑：

stylesheet.css

#circle 

    height: 100px;
    width: 100px;
    border-radius: 50px;
    background-color: blue;

这是为那些询问的人准备的 CSS，尽管正如我所说，它只在 Chrome 上运行。

编辑 2：

重大新闻！

它似乎正在动画，但是它“闪烁”到边界半径 0，然后向内动画。

【问题讨论】：

关联的样式有哪些

你试过borderRadius: 0吗？

@MattParlane 不，我在没有运气之间尝试过一些东西。

@ArunPJohny 将它们作为编辑添加到帖子中，不敢相信我最初忘记发布 mb。

我投票决定将此问题作为离题结束，因为它与 ***.com/questions/1010058/… 重复

【参考方案1】：

试试这个代码 sn-p:

$(function() 
  $("#circle").click(function() 
    $(this).animate(
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0,
      WebkitBorderTopLeftRadius: 0,
      WebkitBorderTopRightRadius: 0,
      WebkitBorderBottomLeftRadius: 0,
      WebkitBorderBottomRightRadius: 0,
      MozBorderRadius: 0
    , 1600);
  );
);

您需要设置所有跨浏览器边界半径属性才能在所有浏览器上运行它。

Plunker

【讨论】：

哇，这行得通，你介意解释一下原因吗？我知道代码在做什么/说明什么，但是为什么这个功能会在我的原始代码（闪烁到borderRadius0 然后向内动画）上正确运行（向外动画）？

我很惊讶需要 Webkit 前缀，因为 Chrome 可以工作，你只需要前四个（borderTopLeftRadius 到 borderBottomRightRadius）就可以在所有现代浏览器中工作 - 这就是为什么复制 4 年旧的 SO 答案并不总是最好的答案

我并没有打算通过提供答案来赚取积分，而不仅仅是帮助开发人员。我已经投票结束了。