Currently, I have a function implemented that scales up pictures on mouse-enter and returns them to normal size on mouse-out. However, there is an issue where if I quickly move the mouse out and then back in before the picture has returned to its original size, the image will continue to scale up (x2.7) from whatever size it was at the moment of mouse-enter, resulting in a huge image that does not return to its original size. How can I prevent the function from running until the image has fully returned to its original size? Check out vgtesting.co.nf (under the dog walking tab) to see what I am attempting to accomplish.
//to scale up on hover
$('#videoandmapwrap').on({
mouseenter: function () {
current_h = $(this, 'img')[0].height;
current_w = $(this, 'img')[0].width;
$(this).stop(true, false).animate({
width: (current_w * 2.7),
height: (current_h * 2.7)
}, 900);
},
mouseleave: function () {
$(this).stop(true, false).animate({
width: current_w + 'px',
height: current_h + 'px'
}, 400);
}
}, 'img');