当我通过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>`
答案 0 :(得分:0)
你可以使用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
}