bounce animation using constructor?

Question

This is my company logo

I want to give a bounce animation to each individual hair on mouseover.the animation part is done on the first hair,but i don`t want to give events to each and every hair image. So here is my question,I am using constructor in my javascript code.Is it possible that I create a method in my prototype and make instances of it? So basiclly I dont want to fire 10 events or 10 addEventListeners,I want a smart way out of this. How do I complete my task,as in every hair should bounce on mouseover of itself only

My code: HTML:

 <div class="main">
<div class="hair">
    <img src="images/single.png" id="hair1" width="13" height="40" >
    <img src="images/single.png" id="hair2" width="13" height="40">
    <img src="images/single.png" id="hair3" width="13" height="40">
    <img src="images/single.png" id="hair4" width="13" height="40">
    <img src="images/single.png" id="hair5" width="13" height="40">
    <img src="images/single.png" id="hair6" width="13" height="40">
    <img src="images/single.png" id="hair7" width="13" height="40">
    <img src="images/single.png" id="hair8" width="13" height="40">
    <img src="images/single.png" id="hair9" width="13" height="40">
</div>
    <div class="face">
        <img src="images/ec_logo.png">
    </div>

Javascript:

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

i don`t have a problem with animation,that`s fine...i am just asking how to invoke every hair for the same action,like when my mouseover is on hair no.2 then only 2nd hair should bounce — , Jun 04 '13 at 11:04
give a common class to each hair,attach the mouseover event handler to the class.In the event handler , use $(this).id and animate using that id — Harsha Venkataramu, Jun 04 '13 at 11:05
so in my html,i have to do this mouseover=function_bounce(this.id) for every hair???or i have to write addEventListener 10 times for every hair??? — , Jun 04 '13 at 11:08
you don't have to write an event listener for each hair.Give a common class like ` ` then,you can use `document.getElementsByClassName('hairStrand')` https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName — Harsha Venkataramu, Jun 04 '13 at 11:10
@Dineshkani : Are you sure that you have to write an eventListener for every individual hair ? — Harsha Venkataramu, Jun 04 '13 at 11:12
I wanna make my code as flexible as possible.Less is MORE!!! — , Jun 04 '13 at 11:14
@jayeshjain : Adding a class won't make your code any less flexible! — Harsha Venkataramu, Jun 04 '13 at 11:14
@harsha Yes, use document.getElementsByClassName() you need to iterate every class and put a listener. — Dineshkani, Jun 04 '13 at 11:14
@Dineshkani : Isn't that a single loop instead of writing an eventListener for 10 seperate ids — Harsha Venkataramu, Jun 04 '13 at 11:16
@harsha what looping do in here? It also add 10 eventListener buddy. — Dineshkani, Jun 04 '13 at 11:17
let me try few things in here!!!i will let you know whether your tricks worked or not??by the way..the discussion was helpful — , Jun 04 '13 at 11:21
@Dineshkani : For instance , won't the amount of code you write reduce ;) — Harsha Venkataramu, Jun 04 '13 at 11:36
If you don't want 10 distinct event listeners (which wouldn't be that bad, btw) then you will have to use **event delegation** (search for it). Please notice that this has *absolutely nothing* to do with constructors or prototypical inheritance. — Bergi, Jun 04 '13 at 15:10
@Bergi:if I use constructor,than I have to create 10 instances of it u mean to say??there is no other option? — , Jun 04 '13 at 15:13
@jayeshjain: No, I just said that the events have nothing to do with constructors. Why do you want to use them? Try normal functions first. — Bergi, Jun 04 '13 at 15:15
this is my first time around with constructors,i thought maybe if i could create method and do my job in 2 lines rather than the obvious simple way,that we usually use. — , Jun 04 '13 at 15:17

CoolCmd · Answer 1 · 2013-06-13T13:27:26.827

0

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

edited Jun 13 '13 at 13:27

answered Jun 13 '13 at 13:18

CoolCmd

939
8
13

score 0 · Answer 2 · answered Jun 13 '13 at 14:28

You can delay the bounce using 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();
    });
}

bounce animation using constructor?

2 Answers2