jQuery的animate函数无法实现border-radius属性由50px->0的过渡动画？

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       .container{
           width: 800px;
           height: 400px;
           margin: 0 auto;
           position: relative;
           text-align: center;
           background: #ddd;
       }
       .container div{
           width: 50px;
           height: 50px;
           position: absolute;
           top: 50%;
           left: 50%;
           background-color: pink;
/*初始的border-radius 50%*/
           border-radius: 50%;
       }
       .container div:first-child{
           margin-top: -100px;
       }
       .container div:nth-child(2){
           margin-left: -100px;
           background-color: blue;
       }
       .container div:nth-child(3){
           margin-left: 100px;
           background-color: yellow;
       }
       .container div:nth-child(4){
           background-color: green;
           margin-top: 100px;
       }

   </style>
</head>
<body>
   <div class="container">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
   </div>
   <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
   <script >

       var a = $('.container>div');
       $(a[0]).animate({
               'margin-top': '100px',
               // 此属性设置无效。只能由小到大
               'borderRadius': 0,
           },1000);

       // setInterval(function () {
       //    $(a[0]).animate({
       //        'margin-top': '100px',
       //        'borderRadius': 25,
       //    },1000).animate({
       //        'margin-top': '-100px',
       //        'borderRadius': 0,
       //    },1000);

       //    $(a[1]).animate({
       //        'margin-left': '100px',
       //        'borderRadius': 25,
       //    },1000).animate({
       //        'margin-left': '-100px',
       //        'borderRadius': 0,
       //    },1000);

       //    $(a[2]).animate({
       //        'margin-left': '-100px',
       //        'borderRadius': 25,
       //    },1000).animate({
       //        'margin-left': '100px',
       //        'borderRadius': 0,
       //    },1000);

       //    $(a[3]).animate({
       //        'margin-top': '-100px',
       //        'borderRadius': 25,
       //    },1000).animate({
       //        'margin-top': '100px',
       //        'border-radius': 0,
       //    },1000);
       // },1000);



   </script>
</body>
</html>

慕粉1473661185 2019-04-28

源自：jQuery动画深入详解 3-3 编程练习

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2019-04-29 14:50:18

同学你好，这是因为jQuery中animate方法对border-radius的动画存在问题，可以尝试下面这种写发兼容火狐浏览器

$(a[0]).animate({
        'margin-top': '100px',
        "borderTopLeftRadius": 0,
        "borderTopRightRadius": 0,
        "borderBottomLeftRadius": 0,
        "borderBottomRightRadius": 0,

    }, 1000, function() {
        $(a[0]).animate({
            'margin-top': '-100px',
            'borderRadius': "50px",
        }, 1000, )
    });

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

好帮手慕慕子 2019-04-29 11:01:36

同学你好，因为在CSS样式中的border-radius的单位为百分比，使用animate函数实现属性变化的时候，需要使用对应的单位哦~~ 老师这里提供一个简单的例子，供同学参考