TypeError : value.animate가 함수가 아닙니다.

Question

형의 웹 사이트에이 간단한 오디오 플레이어를 만들려고 노력했는데 현재 웹 사이트가 좋지 않아서입니다.

그래서 나는 HTML로 음악을 표현하는 것이 좋을 것이라고 생각했던 회색 박스를 몇 개 가지고 있습니다. 이것은 html이 보이는 것입니다. 내가 jQuery에서 형제를 쉽게 찾을 수 있도록 참조 상자의 ID를 가진 div가 하나 있습니다. 또한, 그들은 그들이 움직이게 될 높이를 나타내는 'h'값을 가지고 있습니다 ... 지금까지 나는 그렇게하고 있습니다. 그러나 이후에 rdm을 만들려고합니다 :

<div class='greybox' id='reference-box'></div> 
<div class='greybox' data-h='15'></div> 
<div class='greybox' data-h='5'></div> 
<div class='greybox' data-h='7'></div> 
<div class='greybox' data-h='2'></div> 
<div class='greybox' data-h='15'></div> 

이것은 내가 찾는 방법, 그리고 jQuery를 함께 형제 자매를 저장 :

var $boxes = $('#reference-box').siblings('.greybox'); 

I 플레이어 번 호출되는 함수의 모든 요소를 ​​통해 다음 루프는 해제 일시 : 그러나

function animateBars(){ 
    if (audio.paused === false){ //Check if the audio is paused (stops if it is therefor) 
     $.each($boxes, function(index, value){ 
      console.log(heightToBecome + " || " + index + " || Boxed Length: " + $boxes.length + " || Box Element: " + value); 

      value.animate({ 
       height: "5px" 
      }, "slow"); 

      //Do the animations (above and below) 

      value.animate({ 
       height: "15px" 
      }, "slow", animateBars); 
     }); 
    } 
} 

,이 문제가 발생합니다 :

TypeError: value.animate is not a function. (In 'value.animate({ height: "5px" }, "slow")', 'value.animate' is undefined)

다른 게시물을 살펴 봤지만 대부분 이해가되지 않으며 다른 것들은 작동하지 않았습니다.

감사합니다.

Answer 1

value은 jQuery 객체가 아닌 DOMElement입니다. 요소에서 jQuery 메서드를 호출 할 때 $(value)을 사용하십시오.

$.each($boxes, function(index, value) { 
    var $value = $(value); // create the jQuery object... 

    console.log(heightToBecome + " || " + index + " || Boxed Length: " + $boxes.length + " || Box Element: " + value); 

    // ... then use it to perform the animations 
    $value.animate({ 
     height: "5px" 
    }, "slow"); 

    //Do the animations (above and below) 

    $value.animate({ 
     height: "15px" 
    }, "slow", animateBars); 
});