2012-02-29 2 views
1

진행률 막대를 부드럽게 늘리려면 어떻게합니까? 막대에 10 점을 더하고 빼는 버튼이있는 진행 막대가 있습니다. () 막대가 '막대'를 누르면 새 값으로 바뀌고, 부드럽게 증가 시키려면 막대가 있습니다. 깎는?jQuery 진행률 막대

편집 :

$(function(){ 
var progress = $('#progressBar').progressbar({ 
    value:50 
}); 

$('#upBtn').click(function(){ 
    progress.progressbar('value', progress.progressbar('value') + 10);   
}); 

$('#dwnBtn').click(function(){ 
    progress.progressbar('value', progress.progressbar('value') - 10);   
}); 

$('button#checkBtn').click(function(){ 
    var value = progress.progressbar('value'); 
    if(value > 50 && value < 80){ 
     $('.incorrect').hide(); 
     $('.incorrect2').hide(); 
     $('.correct2').hide(); 
     $('.balance').hide(); 
     $('.correct').fadeIn('slow'); 
    } else if(value < 50 && value > 20){ 
     $('.correct').hide(); 
     $('.correct2').hide(); 
     $('.incorrect2').hide(); 
     $('.balance').hide(); 
     $('.incorrect').fadeIn('slow');    
    } else if(value >= 80){ 
     $('.correct').hide(); 
     $('.balance').hide(); 
     $('.incorrect2').hide(); 
     $('.correct2').fadeIn('slow');    
    } else if(value <= 20){ 
     $('.correct').hide(); 
     $('.balance').hide(); 
     $('.incorrect').hide(); 
     $('.correct2').hide(); 
     $('.incorrect2').fadeIn('slow');    
    } else{ 
     $('.correct').hide(); 
     $('.incorrect2').hide(); 
     $('.correct2').hide(); 
     $('.incorrect').hide(); 
     $('.balance').fadeIn('slow');  
    } 
    }); 
}); 

이 코드가 Makotosan 내게 준 무엇을 기반으로합니다. 나는 'check'버튼을위한 기능이 있다면 3을 더했다. 이 코드를 편집하여 진행률 막대를 부드럽게 늘리려면 어떻게해야합니까? 당신은 CSS3를 사용 CSS3 애니메이션을 사용하여 폭을 설정하기 위해 jQuery를 사용할 수있는 경우

답변

1

를 사용할 수 있습니다. 그런 다음 전환이 브라우저에 의해 제어됩니다.

+0

CSS3를 편집, 나는 ... 당신은 CSS3 전환을 사용하는 것이 좋습니다하고자했다 – Marian

+0

제작 잘못된 문을 타이로 내가 볼 것, 내가 사용 해본 적이 없어서 .. 당신이 말하는 질문 – MorrisLiang

+0

흠 .. 당신이 할 수있는 CSS3에서 사용할 내용을 더 잘 설명 하시겠습니까? 전환을 이해했지만 .ui-progressbar-value에 할당해야합니까? 그리고 나서 ... – Marian

0

당신은 animate()

//get current width 
var width = $('#yourbarid').width(); 
//add 10% 
var newWidth = width*1.1; 
//animate towards newWidth 
$('#yourbarid').animate({ width : newWidth}); 
+0

그것이 – Marian