Question

我查看了其他帖子，并且有一个正在运行的解决方案涉及＆＃34;事件＆＃34;但是，我无法看到它如何适合我的代码。因为它是.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
        });

    });

});

我尝试过迭代而没有＆＃34;，{duration：x}＆＃34;只是＆＃34;，1500＆＃34;正如我所看到它使用两种方式但是除了Chrome之外的任何东西都不起作用。该功能将一个圆圈变成一个正方形，但在所有浏览器中仍然可以，但它只在Chrome中设置动画。

修改：

stylesheet.css中

#circle {

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

}

以下是那些问过的人的CSS，因为我说它只能在Chrome上运行。

编辑2：

突发新闻！

它似乎是动画但它是＆＃34;闪烁＆＃34;到border-radius 0然后向内动画。

Answer 1

试试这段代码：

$(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

jQuery .animate（）仅在Chrome中动画，在其他浏览器中即时更改

1 个答案: