Hey everyone,

I'm trying to layout some thumbs according to a grid and then when I mouse over one of the thumbs it should scale up from the center (not from the top left corner). Everything is going fine except when I mouse over and out relatively fast, the thumbs are moving out of place and the scaling is messing up. I cannot rely on the users not doing so, hence I need to find a solution for this issue.

Here's my code:

private function thumbOver(e:MouseEvent):void
        {
            TweenLite.to(e.target, 0.5, { x: e.target.x - offset, y: e.target.y - offset, scaleX:1.1, scaleY:1.1, 
            onStart: function() { e.target.removeEventListener(MouseEvent.MOUSE_OVER, thumbOut); }, 
            onComplete: function() {e.target.addEventListener(MouseEvent.MOUSE_OVER, thumbOut);} } );
        }
        
        private function thumbOut(e:MouseEvent):void
        {
            TweenLite.to(e.target, 0.5, { x: e.target.x + offset, y: e.target.y + offset, scaleX:1, scaleY:1, 
            onStart: function() { e.target.removeEventListener(MouseEvent.MOUSE_OUT, thumbOver); }, 
            onComplete: function() {e.target.addEventListener(MouseEvent.MOUSE_OUT, thumbOver); }  } );
        }

Any thoughts?