TypeError: value.animate ist keine Funktion

Question

Ich habe versucht, diesen einfachen kleinen Audio-Player für die Website meines Bruders zu machen, da sein aktueller nicht sehr nett ist.

Also, ich habe in HTML ein paar graue Kästchen, die ich dachte, wäre schön, animiert zu haben (um Musikbeats darzustellen). So sieht das HTML aus. Ich habe ein Div mit der ID der Referenz-Box, so dass ich seine Geschwister leicht in jQuery finden kann. Außerdem haben sie ein ‚h‘ Wert, der die Höhe repräsentiert werden sie animiert werden, um zu gehen ... so weit ich es so zu tun, aber ich plane, auf die es RDM nach:

<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> 

Dies ist, wie ich finde, und speichern Sie die Geschwister mit jQuery:

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

ich dann eine Schleife durch alle Elemente in einer Funktion, die einmal der Spieler genannt wird, ist un-Pause:

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); 
     }); 
    } 
} 

jedoch , Bekomme ich dieses Problem:

Ich habe andere Beiträge angesehen, aber die meisten verstehe ich nicht, und andere haben nicht funktioniert.

Vielen Dank für Ihre Zeit.

Answer 1

value ist ein DOMElement, kein jQuery-Objekt. Verwenden Sie beim Versuch, jQuery-Methoden für das Element aufzurufen.

$.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); 
});