Внутренний радиус границы div не работает при анимации с помощью javascript

Внутренняя граница div не работает, когда я динамически изменяю ширину рамки по java-скрипту, но она работает, когда я не использую js.I am animating div увеличивается и уменьшает ширину границы div. Но Внутренний радиус границы не появляется при увеличении размера div во время анимации. Спасибо advance.`Внутренний радиус границы div не работает при анимации с помощью javascript

<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>`

источник

2014-09-08 Rasel

Нет ничего плохого в анимации. Border-widht просто больше, чем внешний радиус, поэтому внутренний радиус будет равен нулю. Если вы увеличите радиус границы (http://jsfiddle.net/rj1ymfk6/) до 40, будет показан внутренний радиус и будет равен нулю, только если border-widht равен 40. – Teemu

Как я могу зафиксировать Это? пожалуйста, – Rasel

его ok Teemu thanks.it решено увеличить радиус границы до 40 – Rasel

вы можете использовать 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 
}

источник

2014-09-08 08:26:19

ваше предложение работает, но я хочу внутренний радиус радиуса для div. – Rasel

вы можете заменить границу шириной с радиусом границы –

ok بهنام محمدی спасибо большое. – Rasel

Внутренний радиус границы div не работает при анимации с помощью javascript

ответ

Смежные вопросы