Delay jQuery animation by few seconds

I got into a situation where I needed to start the animation after 2 seconds once the mouse is on the image. In other words, need to delay the animation for 2 seconds on mouseover event. So in this post I am sharing the jQuery solution to delay the animation by few seconds.

Related Post:

To delay execution of animation, use .delay() method which allows to delay the execution of functions that follow it in the queue. It accepts duration as parameter. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.
$(document).ready(function () {
  $('img').mouseenter(function () {
     $(this).stop().delay(1000).animate({
         height: '+=50px',
         width: '+=50px'
     });
  });

  $('img').mouseleave(function () {
      $(this).stop().delay(1000).animate({
         height: '-=50px',
         width: '-=50px'
     });
  });
});
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..