jQuery를 수직 애니메이션 바 튜토리얼

Question

내가 여기 물어 수 있는지 확실하지 않습니다 - 난,하지만 난 아마 .animate로 (JQuery와/SVG 이루어 하나의 애니메이션 바 튜토리얼을 찾기 위해 노력했습니다 생각한다).

로딩 바를 찾으려고하지 않고 실제로 보여지는 바를 원합니다. 예를 들어 섭씨 0도에서 24도까지 시각화 할 수 있습니다.

저는 실제로 그것을하는 방법을 시각화 할 수 없으며 실제로 튜토리얼을 찾을 수 없습니다. 누구든지 튜토리얼을 가르쳐 줄 수 있습니까 (또는 명확한 커팅 팁, 여러분이 여기서 열심히 일하는 것을 강조하고, 실제로 배우기를 원합니다) 실제로 어떻게 할 수 있는지 이해할 수 있습니까? 그것은 HTML/CSS의 문제 나 자바 스크립트/JQuery와

0 Deg       24 Deg 
******       ____ 
******       | | 
******       | | 
******       | | 
______  animates to  _|__|_ 

Answer 1

인가 :

여기 거친 시각화입니까? 이 작업을 수행하는 하나의 가능한 방법을 보여줍니다 작은 샘플 :

<button id="start">start animation</button> 
<div id="foo"></div> 

#foo { 
    background-color: rgb(235,235,235); 
    box-shadow: 0 0 1px 1px rgb(130,130,130); 
    width: 20px; 
    height: 0px; 
    margin: 50px; 
    position: relative; 
    top: 200px; 
} 

$(function() { 
    $('#start').click(function() { 
     $('#foo').animate({ 
      height: 200, 
      top: 0 
     }); 
    }); 
}); 

jsfiddle