jquery - 进度条进度的边框半径

Question

当栏尚未达到 100% 时，我想保持边缘没有圆角效果。我所做的是使用 if then 更改栏的 css，但它落后了一步。看看

http://jsfiddle.net/xjkhH/

即使达到100％，您也需要再次击打

$('#test').on('click', function (e) {
    $progress_bar = $('#progressbarr');

    //convert to percent
    var progressbar_width;


    progressbar_width = Math.floor(100 * ($progress_bar.find('div').width()) / $progress_bar.width());

    var i = progressbar_width + 10; // change in percent

    if (i < 101) {


        $progress_bar.find('div').css('width', (i + '%'));

        $progress_bar.find('span').text(i + '%');


    } else {
        $progress_bar.find('div').css('border-top-right-radius', '4px');
        $progress_bar.find('div').css('border-bottom-right-radius', '4px');

    }

});

Answer 1

保持简单这就是你所需要的（CSS）：

overflow:hidden;

为你的#progressbarr:)

演示

Answer 2

你可以这样做：

if (i <= 100) {


        $progress_bar.find('div').css('width', (i + '%'));

        $progress_bar.find('span').text(i + '%');
        if(i === 100)
            $(this).triggerHandler('click');

    }

演示

Answer 3

演示

只需在 else 语句之前添加以下代码

$progress_bar.find('div').css('border-top-right-radius', '4px');
$progress_bar.find('div').css('border-bottom-right-radius', '4px');

Answer 4

只需使用以下代码

$('#test').on('click', function (e) {
    $progress_bar = $('#progressbarr');

    //convert to percent
    var progressbar_width;


    progressbar_width = Math.floor(100 * ($progress_bar.find('div').width()) / $progress_bar.width());

    var i = progressbar_width + 10; // change in percent

    if (i < 101) {


        $progress_bar.find('div').css('width', (i + '%'));

        $progress_bar.find('span').text(i + '%');
        if( i == 100) {
            $progress_bar.find('div').css('border-top-right-radius', '4px');
        $progress_bar.find('div').css('border-bottom-right-radius', '4px');
        }

    }

    // if
});