javascript - TypeError : value. animate 不是一个函数

Question

我试图为我兄弟的网站制作这个简单的小型音频播放器，因为他当前的播放器不是很好。

所以，我在 HTML 中有一些灰色的框，我认为将它们设置为动画(移动以代表音乐节拍)会很好。这就是 html 的样子。我有一个 div 的 id 为引用框，这样我就可以在 jQuery 中轻松找到它的同级元素。另外，它们有一个“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);
});