Javascript 使用构造函数反弹动画？

我想为mouseover上的每一根头发提供反弹动画。动画部分在第一根头发上完成，但我不想为每一根头发图像提供事件。 所以我的问题是，我在javascript代码中使用构造函数。我是否可以在原型中创建一个方法并创建它的实例？所以基本上我不想触发10个事件或10个附加的监听器，我想要一个聪明的解决方法。 我该如何完成我的任务，因为每根头发都应该只在鼠标上弹跳

我的代码： HTML:

---

您可以使用

setTimeout

延迟反弹：

(function(){

    // "private" vars
    var delayPace = 100;// ms
    var instanceCount = 0;


    hair = function (){
        // don't need to return this if it's going 
        // to be instantiated via the new keyword
        this.delay = instanceCount * delayPace;
        instanceCount++;
    };


    hair.prototype={
        delay : 0,

        bounce : function(){
             this.stop();
             this._t = setTimeout(this._bounce, this.delay);
        },

        _bounce : function(){
            // this is were the actual magic happens
        },

        stop : function(){
            if(this.t){
                clearTimeout(this.t);
            }
            // other code to stop the animation
        }
    };
})();

// keep all your hairs in one place!
var hairs = [];

// instantiate them
hairs.push(new hair());
//...
hairs.push(new hair());

var onHover = function(){
    hairs.forEach(function(h){
        h.bounce();
    });
}

---

尝试使用jquery Animate我对动画没有问题，这很好…我只是问如何为相同的操作调用每个头发，比如当我的鼠标悬停在头发2上时，只有第二根头发应该反弹为每个头发创建一个公共类，将鼠标悬停事件处理程序附加到该类。在事件处理程序中，使用$（此）.id并在我的html中使用该idso制作动画，我必须为每根头发执行mouseover=function_bounce（this.id）？或者我必须为每根头发编写10次addEventListener？？？如果你不想要10个不同的事件监听器（顺便说一句，这也没那么糟糕），那么你必须使用事件委派（搜索它）。请注意，这与构造函数或原型继承完全无关。

(function(){
    hair=function (){
        return this;
    };

    hair.prototype={
        bounce:function(){
 //code for some bounce animation
        }
    };
})();
document.getElementById('hair??').addEventListener("mouseover",???,false);????????//this is the part i am confused about,how to give same animation to every single hair by using object instances???

// one event listener for whole 'haircut'
document.getElementsByClassName('hair')[0].addEventListener('mouseover',
function(objEvent)
{
    var elImg = objEvent.target;
    if (elImg.nodeName == 'IMG')
    {
        objEvent.stopPropagation();
        console.log(elImg.getAttribute('id')); // just for debug
        // xxx.bounce(elImg) or whatever you want
    }
}, false);

(function(){

    // "private" vars
    var delayPace = 100;// ms
    var instanceCount = 0;


    hair = function (){
        // don't need to return this if it's going 
        // to be instantiated via the new keyword
        this.delay = instanceCount * delayPace;
        instanceCount++;
    };


    hair.prototype={
        delay : 0,

        bounce : function(){
             this.stop();
             this._t = setTimeout(this._bounce, this.delay);
        },

        _bounce : function(){
            // this is were the actual magic happens
        },

        stop : function(){
            if(this.t){
                clearTimeout(this.t);
            }
            // other code to stop the animation
        }
    };
})();

// keep all your hairs in one place!
var hairs = [];

// instantiate them
hairs.push(new hair());
//...
hairs.push(new hair());

var onHover = function(){
    hairs.forEach(function(h){
        h.bounce();
    });
}