Learning jQuery

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:

• jQuery.fx.interval Property
• How to disable jQuery animation
• 8 jQuery Loading Animation and Progress Bar Plugin

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.