利用jq如何让这种经验条上的球根据经验比例变化

Question

就是css是这个
.progressbar-in{
background-color: #009fe7;
height: 3px;
width: 10px;
max-width: 680px;
transition-property: width;
transition-duration: .5s;
transition-timing-function: linear;
transition-delay: 0;
}这个是经验条
.lv-m1{
float: left;
font-size: 8px;
width: 12px;
height:12px;
background: #019fe8;
border-radius: 14px;
border: 0;
margin-top: -8px;
margin-left: 68px;
}这个是上面蓝色小球
用了js
$(".progressbar-in").width("50%");
怎样才能做到根据progressbar-in的width变化改变lv-m1的颜色
就比如到达多少以后就变成蓝色
原来是灰色

Answer 1

用两个div层让其重叠在一起，上层为蓝色，下层为灰色。
并且上层设置overflow: hidden;

Answer 2

做两套   放在一个大div里面  类似这种<div class="top">
       <div class="huise"></div>
       <div class="lanse"></div>
</div>然后给top设置相对定位  蓝色设置 0 0的绝对定位 .top{position:relative}
.lanse{position:absolute;top:0;left:0;overflow:hidden;widht:0;height:20px}
然后根据经验条的比例动态去设置.lanse的width属性即可  overflow:hidden  这个很重要