title: Animation in KineticJS
body: <p>I have a circle added to a layer. In the top of the layer I added a text. I would like to run an animation when the mouse is over the circle, but when the mouse reaches the text the <code>mouseout</code> callback function is called. How can I prevent that? </p>
  
  <pre><code>var circle = new Kinetic.Circle({
      x: j * xcenterstep  + xshift,
      y: i * ycenterstep  + yshift,
      radius: t_radius,
      fill: t_fill,
      stroke: t_stroke,
      strokeWidth: t_stroke_w,
      strokeOpacity: 0.1,
      opacity: 0.3 + t_number * 0.05,                 
  });
  if (t_number) {
      circle.tw;
      circle.on("mouseover", function () {                    
          this.tw = new Kinetic.Tween({
              node: this,
              duration: 0.3,
              strokeWidth: 6
          });
          this.tw.play();
      });
      circle.on("mouseout", function () {
          this.tw.reverse();
      });
  }
  
  // Adding the text 
  var radiusText = new Kinetic.Text({
      x : circle.getX(),
      y : circle.getY(),
      text : t_number,
      fontSize : radius,                  
      fill : '#fff',
      fontStyle: 'bold',
      align : 'center'
  });
  radiusText.setOffset({
      x : radiusText.getWidth()/2,    
      y : radiusText.getHeight()/2
  });
  
  bgLayer.add(circle);
  bgLayer.add(radiusText); 
  </code></pre>