kineticjs change tween start color

Question

I am trying to have a three state mouseover for a rectangle in KineticJS. The rectangle starts as white, then a mouseover on the rectangle changes the colour to red, which then starts a tween and tweens over 1 second to white. Another mouseover would repeat the process I was able to get this running using the version 4 library, but not version 5. JsFiddle: http://jsfiddle.net/cmh600/uFFN9/12/

Any help greatly appreciated

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var layer = new Kinetic.Layer();
  var rect = new Kinetic.Rect({
    x: 20,
    y: 20,
    width: 100,
    height: 50,
    fillRed: 255,
    fillGreen: 255,
    fillBlue: 255,
    stroke: 'black',
    strokeWidth: 2,
  });

  layer.add(rect);
  stage.add(layer);

    var tween = new Kinetic.Tween({
            node: rect, 
            duration: 2,
            opacity: 1,
            easing: Kinetic.Easings.Linear,
            fillRed: 255,
            fillGreen: 255,
            fillBlue: 255
          }); 

    rect.on("mouseover", function() {
        rect._setAttr('fillRed',255);
        rect._setAttr('fillGreen',0);
        rect._setAttr('fillBlue',0);
        rect.draw();
      tween.play();
    });

Answer 1

You must declare the tween after set the new fill color of the rect, because else, starting values will be wrong (and it will be transformed to white instantly). Working with KJ5 :

rect.on("mouseover", function() {
    rect.fillBlue(0);
    rect.fillGreen(0);
    rect.draw();
    var tween = new Kinetic.Tween({
        node: rect, 
        duration: 2,
        opacity: 1,
        easing: Kinetic.Easings.Linear,
        fillRed: 255,
        fillGreen: 255,
        fillBlue: 255
    }); 
    tween.play();
});