Question

我有以下代码：

<!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的新手，只想了解我在这里做错了什么。

谢谢。

Answer 1

为了获得最佳性能（以及更易于维护的代码），尽可能使用CSS动画而不是javascript中的动画：

＆＃13;

$('#circle').click(function() {
  $(this).toggleClass('clicked');
});

＆＃13;

#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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="circle">

＆＃13;

Answer 2

首先更改css中的border-radius：

#circle {
    height:200px;
    width:200px;
    border-radius:100%;
    background-color: red;
}

通过这种方式，圆圈将始终为圆圈。

$(this).animate({
    width:"300px",
    height:"300px",
    marginLeft:"100px",
    marginTop:"100px"
 }, 1700);

现在在jQuery中，您不需要使用borderRadius。

jQuery animate在FireFox上效果不佳？

2 个答案: