Resizing images on mouse over (Javascript/MooTools)

Question

I've built a webpage that's supposed to increase the size of images onmouseover. I'm not replacing the images with bigger ones but rather "stretch" the existing ones because of system limitations.

Here's the webpage: http://www.catmoviez.com/IMDBQueries.aspx

You can see that the movie images get bigger when you're on them.

Problem is when I move my mouse too quick that sometimes an image gets stuck open or it causes inifinite flickering.

attached is also the code I'm using for the resize:

function resizeImage(elem,width,height){
    var myEffect = new Fx.Morph(elem, {duration: 350});
    myEffect.start({'height': height,'width': width});
}

Answer 1

First thing, set this variable outside your functions

var imagegrow

And then mouseover this

function () {
    imagegrow = setTimeout(function(){ resizeImage(elem,width,height); },1000);
}

And the mouseout this:

function () {
    clearTimeout(imagegrow);
}

Adjust the 1000 number to suit your preferred delay (it's in milliseconds). I'd write the whole code for you, but I haven't used MooTools for a while.

Comment if you have any questions