我看过其他文章，并且有一个正在运行的涉及“事件”的解决方案，但是我看不到它如何适合我的代码。就目前而言，除非我使用chrome，否则.animate（）函数（更具体地说是持续时间函数）似乎无法正常工作。
这是我的代码。
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，然后向内制作动画。
尝试以下代码片段：
$(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);
});
});
您需要设置所有跨浏览器的边界半径属性，以在所有浏览器上运行它。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句