TypeError：value.animate不是函數

Question

我試圖爲我兄弟的網站製作這個簡單的小型音頻播放器，因爲他目前的播放器不是很好。

所以，我在HTML中有幾個灰色的框，我認爲這將是很好的動畫（移動代表音樂節拍）。這就是html的樣子。我有一個與參考框id的div，所以我可以很容易地在jQuery中找到它的兄弟姐妹。此外，他們有這代表他們將動畫去......到目前爲止，我正在做這樣的一個HIGHT「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'); 

然後，我通過一個函數的所有元素被稱爲一旦玩家環路取消暫停：

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是一個DOMElement，而不是一個jQuery對象。嘗試調用元素上的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); 
});