点击按钮时进度条背景闪烁的问题

[sinat_22002815]

不说了，直接贴代码，求大神帮忙啊。
<div class="panel-body text-center">
<div class="panel-title">
<div id="day" class="col-xs-4" onclick="setType(1);">日</div>
<div id="month" class="col-xs-4" onclick="setType(2);">月</div>
<div id="year" class="col-xs-4" onclick="setType(3);">年</div>
<img src="${ctx}/images/x-icon-3.png" style="position:absolute; height:22px; margin-left:-30px; margin-top:-30px;" />
</div>
<div id="linear" class="panel-body text-center" style="height:200px;margin-bottom:35px;">
</div>
</div>
<style type="text/css">
.html5YuanBg{ height:200px; width:200px; margin:auto; position: relative; background:url(${ctx}/images/progressBar/bg.png) no-repeat; background-size:200px 200px; }
.html5YuanBg .yuanBg-d{ position:absolute; z-index:11;height:200px; overflow:hidden; width:100px;position:absolute; top:0px; left:100px;}
.html5YuanBg .yuanBg-d .zhebi{background:url(${ctx}/images/progressBar/bg-D.png);height:200px;background-size:200px 200px; width:200px;position:absolute; top:0px; left:-100px; z-index:10}
.html5YuanBg .yuanBg-d .zhizhen-d{height:200px; width:200px; background:url(${ctx}/images/progressBar/c3d.png);background-size:200px 200px; position:absolute; top:0px; left:-100px; z-index:9; }

.html5YuanBg .yuanBg-c{ position:absolute; z-index:10;height:200px; overflow:hidden; width:100px;position:absolute; top:0px; left:0px;}
.html5YuanBg .yuanBg-c .zhebi{ background:url(${ctx}/images/progressBar/bg-c.png) left top;background-size:200px 200px;height:200px; width:100px;position:absolute; top:0px; left:0px; z-index:10}
.html5YuanBg .yuanBg-c .zhizhen-c{height:200px; width:200px; background:url(${ctx}/images/progressBar/c3.png);background-size:200px 200px; position:absolute; top:0px; left:0px; z-index:9; }
.html5YuanBg .mybfb{ position:absolute; top:0px; left:0px; z-index:12; text-align:center; width:100%}
.html5YuanBg .mybfb div{ width:100%; padding-top:60px; font-size:48px; color:#7d7d7d;}
.html5YuanBg .mybfb p{ color:#b8b8b8; font-size:14px}
</style>
<script type="text/javascript">
var progress = function(i){
i=i.toFixed(2);
var leftTop = 225;
var leftButtom = 84;
var rightTop = 720;
var rightButtom = 586
var leftHalfCircle = leftTop - leftButtom;
var rightHalfCircle = rightTop - rightButtom;
var cBfb = i*leftHalfCircle / 50 + leftButtom;
var dBfb = i*rightHalfCircle / 50 - leftHalfCircle + rightButtom;
$(".mybfb div").html(i+'%');
if(cBfb<=leftTop){
$(".zhizhen-c").css('-webkit-transform','rotate'+'('+cBfb+'deg)');
}else{
$(".zhizhen-c").css('-webkit-transform','rotate'+'('+leftTop+'deg)');
}
if(i>50){
$(".zhizhen-d").css('-webkit-transform','rotate'+'('+dBfb+'deg)');
}else{
$(".zhizhen-d").css("display","none");
}
}
progress(${plan.percomplete*100});
</script>