Delay jQuery animation by few seconds

Introduction:

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.

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.

HTML:

Animation without Delay









Animation with delay by 1 second on mouseover and mouseout.

JS

$(document).ready(function () {
    $('.WithoutDelay').mouseenter(function () {
        $(this).animate({
            height: '+=50px',
            width: '+=50px'
        });
    });
    $('.WithoutDelay').mouseleave(function () {
        $(this).animate({
            height: '-=50px',
            width: '-=50px'
        });
    });

    $('.WithDelay').mouseenter(function () {
        $(this).stop().delay(1000).animate({
            height: '+=50px',
            width: '+=50px'
        });
    });
    $('.WithDelay').mouseleave(function () {
        $(this).stop().delay(1000).animate({
            height: '-=50px',
            width: '-=50px'
        });
    });
});