jQuery 애니메이션 진행 바 문제

Question

작은 jQuery 문제가 있습니다. 기본적으로 1 초에서 1-2 초 동안 0에서 지정된 비율로로드되는 진행률 표시 줄을 작성하려고합니다.

내가 튜토리얼을 기반으로 지금까지 온 것을에서

봐 : JSFiddle

는 바이올린이 애니메이션을하지만, 내가 실제로 무슨 설명시키지 않을 것임을는 (분명히 내 시험에서 작업을 수행 파일).

따라서 진행률 표시 줄은 예상대로로드되지만 html의 "title ="값에 지정되면 중지됩니다. 백분율을 허용하지 않으므로 너비가 460 인 경우 막대를 50 %로 고정하려면 230 값을 지정해야합니다.

이 스크립트에 대한 또 다른 문제점은 실제로 첫 번째 막대 만 다른 모든 것들은 주어진 값에 상관없이 첫 번째 것을 "복사"합니다. 나에게 이상하게 보입니다.

나는이 두 가지 문제를 해결하는 방법이나 원하는 효과를 얻는 더 좋은 방법을 찾고 있는데, 픽셀 값이 아닌 백분율로 입력하는 것이 더 바람직합니다.

감사합니다.

Answer 1

http://jsfiddle.net/mWdgz/4/

$("document").ready(function() { 

    // animate the progress bar onload 

    $('.progress_bar').each(function() { 
     $(this).animate({ 
      width: this.title 
     }, 1000); 
    }) 

});