Задержка выполнения скрипта при наведении курсора мыши(Jquery)

Имеется данный скрипт, который плавно
увеличивает картинку при наведении курсора мыши.

Хотелось бы установить задержку выполнения
функции при наведении курсора мыши на элемент.
Но как это сделать правильно я не знаю.
Так как начала изучение jquery недавно.

Без задержки имеется баг - если быстро переключать курсор мыши между картинками то они увеличиваются моментально и не плавно.

Я точно не знаю как починить данный баг.
Но думаю, что задержка должна все исправить.


-------------------------------------------
Ссылка на результат с багом: https://codepen.io/anon/pen/RYQoqG
-------------------------------------------


$(document).ready(function(){


$('.zoom').mouseenter(function(){
$(this).children('img').stop(true,true)
.animate({width:"495px",height:"275px",left:"-10px",top:"0"}, 500);
});


$('.zoom').mouseleave(function(){
$(this).children('img').stop(true,true)
.animate({width:"450px",height:"250px",left:"0",top:"0"}, 500);
});

});