jQuery .find() and .animate()

Question

온도계를 만들고 있는데 온도계의 애니메이션 작업을하고 있습니다. 나는 그 일이 자바 스크립트 방법이 있습니다

function setScoreBar(score) { 
    var scoreBar = document.getElementById("dynamicScoreBar"); 
    // var scoreBar = $(scoreBarElem); 
    var height = 250; 
    height = height - 20; 
    var percentage = height/100; 
    scoreBar.find(".meter").animate({ 
     marginTop: (height - (score * percentage)) + "px" 
    }, 400, function() { 
     scoreBar.find(".meter").html(score + "%"); 
    }); 
} 

을하고 내가 그것을 debugg 때이

<div id="dynamicScoreBar" class="scoreBar"> 
    <div class="meter">0%</div> 
    <div class="red"></div> 
</div> 

내가 .find 및 .animate 방법이 존재하지 않는 것을 말한다 오류처럼 내 html로 본다 . 하지만 필자가 시각적 인 스튜디오에서 도움을 얻으려고 할 때, 필자는 시각적 인 스튜디오의 도움을 얻고 그것을 사용하는 옵션을 보여줌으로써 P는 내가 다른 것을 사용할 수 있는가? 또는 어떤 구문이 잘못 되었습니까?

Answer 1

.find 및 .animate은 jQuery 함수입니다. scoreBar이 jQuery 객체 일 때 존재합니다. document.getElementById으로 할당 할 때가 아닙니다. getElementById은 순수한 자바 스크립트 함수이며 DOM 노드를 반환합니다.

jQuery 프레임 워크를 사용하는 경우 DOM 노드를 $(...)으로 묶어 모든 j 노드를 jQuery 객체로 변환 할 수 있습니다. 특정 시나리오에서는 완전히 변수 할당 다시 작성할 수 :

var scoreBar = $('#dynamicScoreBar'); 

을 ... 그리고 scoreBar 변수는 사용할 수 find 및 animate 기능과 jQuery를 객체가 될 것입니다.