I have a function that i'm using to scale pictures up on mouse-enter and return to normal size on mouse-out. The problem is if i quickly mouse-out and then mouse-in before the picture is allowed to return to normal size then the picture will scale up ( x2.7) from whatever size it currently is at on the moment of the mouse-enter ( and will no longer return to its original size)....so it gets huge!! how would I stop the function from running until the img has first returned to its original size? go to vgtesting.co.nf ( dog walking tab) to see what i'm trying to do.
//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');
Like my comment...
Your code seems valid. Only one thing is the two variables. They're not seems defined, and if the variables aren't defined they're limited on their scope (mouseenter function) and not in the other one mouseleave try to define the value globally.
var current_h,current_w; //add this line simply.
$('#videoandmapwrap').on({
mouseenter: function () {
//... your code
}
}, 'img');
example: http://jsfiddle.net/Frogmouth/Ku2fH