Tween Kineticjs Images loaded in loop

Question

I have an issue with images loaded to the canvas not tweening properly. I have mouseover and mouseout events listening on each images that loaded. I want the image to enlarge when mouseover is triggered and reverse on mouseout.

Problem is when I mouseover any image, only the last loaded image enlarges and retracts.

This coincides with another issue I will have when object is clicked, the attributes I want to pass will only be the of the last one loaded..

How do I focus the mouse clicks and hovers to specific node and its attributes from array? The answer may be an index, but seeing I'm not a pro developer, I need some assistance

I tried a suggestion from a similar post here to focus the event in my situation, titled "KineticJS: Play tween after finish other tween" (don't have reputation for multiple links). I tried the following http://jsfiddle.net/cr3jmy2b/30/ using a portion of the sample code and it did not work.

Below is the portion of code that loads the image successfully and tweens only the last image ( http://jsfiddle.net/cr3jmy2b/27/ ).

Many thanks to someone who can help or suggest a different way.

var x = 25;
    var xx = 25; 

    buttonSize = 52 + 10;




    for(var i=0;i<imgs.length;i++){
       if(i > 11){
        var img=new Kinetic.Image({
            x:xx,
            y:400,
            width:45,
            height:65,
            image:imgs[i],
            draggable:true
        }); l.add(img);  xx+=buttonSize;
       } else {
        var img=new Kinetic.Image({
            x:x,
            y:320,
            width:52,
            height:65,
            image:imgs[i],
            draggable:true
        });

        l.add(img); x+=buttonSize;
     }
      for(var s=0; s<oweb.length; s++){
      var ser = oweb[s];
      var sdb = ser.split("_");
      var sname = sdb[1];
      var sattrib = sdb[2];
      var sval = sdb[3];
      var sid = sdb[4];
      }


      //l.draw();

        var tween = new Kinetic.Tween({ node: img, duration: 1, scaleX: 2, scaleY: 2 });
      img.on('mouseover', function(){ tween.play(); console.log("over"); });
      img.on('mouseout', function(){ tween.reverse(); console.log("out"); });
      img.on('mousedown touchstart', function(){
      //document.getElementID(sdb[4]).checked = true;
      console.log("clicked");
      }); l.draw();
      }

    l.draw();
}                                 

Andre

Answer 1

@KirillSlatin answered this. You have taught me a better way with images and shortening code (Ternary Operator. I got the kinectics working better. Used layer.batchDraw() to get rid of choppy mouseover and added the proper easing method for 5.1.0 easing: Kinetic.Easings.method.