Question

当我通过java脚本动态更改边框宽度时，我的div内边框不起作用但是当我不使用j时它可以工作。我正在设置div增加和减少divs边框宽度。但是当增加时，内边框半径不会出现动画期间的div大小。在此先感谢。

<html>
<head>
<style type="text/css">
.animation{
margin:0 auto;
padding:10px;
width:300px;
height:300px;
text-align:center;
vertical-align:center;
}
.radius-all { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }
.template-bg { background: #FFF; }
.template-border { border: 10px solid rgba(100,100,100, 0.5); }
</style>
<script type="text/javascript">
var i=40;var flag=1;
function animate(){

  setTimeout(function () {    
     document.getElementById('animation').style.border = "#CCC "+i+"px"+ " solid";/*problem here*/ 
     document.getElementById('animation').style.width =(320-i)+'px';
     document.getElementById('animation').style.height = (320-i)+'px';
      if(flag)
      i++;
      else
      i--;
      if (i <40) {
          if(i<0){
          flag=1;
          }
        animate(); 
      }else{
      i=40;
      flag=0;
      animate();
      }           
   }, 40)
}

</script>
</head>
<body onload="animate()">
<div class="animation body template-bg template-border radius-all" id="animation">
This is a div
</div>
</body>
</html>`

Answer 1

你可以使用jQuery并且工作非常轻松

这项工作的简单代码

function animate(){
     var bw;
     if($("#animation").css("border-radius")=="40px"){
          bw=0;
     }else{
          bw=40
     }
     $("#animation").animate({"border-radius":bw,"width":320-bw,"height":320-bw},200,function(){
           animate();
     });
}

并使用动画标签的样式属性

#animation{
    border:20px solid #ccc;
    margin:0 auto;
    padding:10px;
    width:300px;
    height:300px;
    text-align:center;
    vertical-align:center
}

使用javascript动画时，div内边框半径不起作用

1 个答案: