Блог

У меня есть красный div на заднем плане с изогнутыми границами и желтый div, отображаемый над ним с изогнутой границей. Желтая полоса медленно заполняет красную полосу (например, для указания прогресса). Посмотрите на эту скрипку:

http://jsfiddle.net/a6Xy9/3/

Код

 <div id="topDiv" style="height:20px; width:200px; background-color:red; border-radius:10px;">
    <div id="childDiv" style="height:20px; width:100px; background-color:yellow; border-top-left-radius:10px; border-bottom-left-radius:10px;">
    </div>
</div>
<br/>
<br/>    
<input id="change" type="button" value="Change Width" style="height:25px; width:100px;"></input>

$("#change").click(function(){
 $("#childDiv").width((parseInt($("#childDiv").width())   5)   "px");
});
 

Теперь я хотел бы, чтобы правая граница желтой полосы была плоской (не изогнутой), когда она не полностью заполняет красную полосу. Но он должен стать изогнутым, когда он полностью заполнит красную полосу. Может кто-нибудь предложить лучший способ реализовать это?

Просто добавьте overflow: hidden в #topDiv

JSFiddle

Поскольку #childDiv является дочерним элементом #topDiv , это должно сработать:

 #topDiv { overflow:hidden; }
 

Однако, чтобы ответить на вопрос, для динамического изменения border-radius , попробуйте следующее:

 $("#childDiv").css('border-radius', '10px');
 

Но в вашем случае overflow свойство является лучшей реализацией.

Внутри вашей функции $(«#change»).click() поместите этот условный оператор. Он будет сравнивать ширину двух разделов, и если ширина дочернего элемента больше или равна верхнему div, он скорректирует радиус вашей границы дочернего div.

 $("#change").click(function(){
    $("#childDiv").width((parseInt($("#childDiv").width())   5)   "px");

    var filled = $("#childDiv").width() >= $("#topDiv").width();
    $("#childDiv").css('border-radius', filled ? '10px' : 0);
});