進度條進度的邊框半徑

當條紋還沒有達到100％時，我想保持沒有圓角效果的邊緣..我所做的是使用如果然後更改酒吧的CSS，但它是一步後面..看看進度條進度的邊框半徑

你需要打一次，即使它達到了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'); 

    } 

});

來源

2013-09-26 Ulises Colen

保持簡單這就是你需要的全部（CSS）：

overflow:hidden;

您#progressbarr :)

DEMO

來源

2013-09-26 10:06:43

omg！沒有注意到！ –

但是邏輯是什麼？溢出：隱藏;意味着它隱藏了超出限度的東西？ –

@UlisesColen是:) –

DEMO

您else語句之前，只需添加以下代碼

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

來源

2013-09-26 09:58:07 coder

你可以只做到這一點：

if (i <= 100) { 


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

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

    }

DEMO

來源

2013-09-26 09:58:57

將這一行$（本）.triggerHandler（ '點擊'）;影響其他事件？ –

triggerHandler（'click'）只會觸發綁定到匹配元素的所有處理程序，而不會發生任何事件傳播。這是你的問題嗎？ –

如果除此之外還有其他點擊事件，它不會右擊？因爲我認爲$（this）只適用於這個特定的作用域 –

只需使用下面的代碼

$('#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 
});

來源

2013-09-26 10:02:24

進度條進度的邊框半徑

回答

相關問題