jQuery动画在FireFox上不能很好地工作？
jQuery动画在FireFox上不能很好地工作？
提问于 2016-01-29 13:00:51
我有以下代码：
<!doctype html>
<html>
<head>
<title>jQuery animate()</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" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.js"></script>
<style type="text/css">
#circle {
height: 200px;
width: 200px;
border-radius: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="circle"></div>
<script>
$("#circle").click(function() {
$(this).animate({
width: "300px",
height: "300px",
borderRadius: "150px",
marginLeft: "100px",
marginTop: "100px"
}, 1700);
});
</script>
</body>
</html>它在Chrome中工作得很好，它的圆圈向下移动很好，但在Firefox (v43.0.4)、IE和Edge中则不然。
我在这里错过了什么？我是jQuery的新手，只是想知道我在这里做错了什么。
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-01-29 13:11:07
首先，更改css中的边框半径：
#circle {
height:200px;
width:200px;
border-radius:100%;
background-color: red;
}这样，圆就永远是一个圆。
$(this).animate({
width:"300px",
height:"300px",
marginLeft:"100px",
marginTop:"100px"
}, 1700);现在在jQuery中，您不需要使用borderRadius。
Stack Overflow用户
发布于 2016-01-29 13:17:17
为了获得最佳性能(以及易于维护的代码)，尽可能使用CSS动画而不是javascript中的动画：
$('#circle').click(function() {
$(this).toggleClass('clicked');
});#circle {
height: 200px;
width: 200px;
border-radius: 100px;
background-color: red;
transition: 1.7s;
}
#circle.clicked {
width: 300px;
height: 300px;
border-radius: 150px;
margin-left: 100px;
margin-top: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="circle">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35085210
复制相关文章
相似问题
腾讯云开发者
