Question: I have tried to implement other solutions but have had no luck... hoping someone can help solve my hover delay problem... I just need to add a short delay on mouse-out.

Thanks in advance!

```
            $('.forward').css({opacity:0, right:0});
            $('.hover-area').hover(function() {
                $(this).find('.forward').stop()
                    .animate({right:20}, {queue:false, duration:300, easing:'easeOutCubic'})
                    .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
            },function() {
                $(this).find('.forward').stop()
                    .animate({right:0}, {queue:false, duration:550, easing:'easeOutSine'})
                    .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
            });

```

Answer: 
You can use `setTimeout()` for make delay on `mouseout`.

```
$('.forward').css({opacity:0, right:0});

    function toogler(element, showHide) {
        if (showHide == 'show') {
            $(element).find('.forward').stop().animate({
                right: 20
            }, {
                queue: false,
                duration: 300,
                easing: 'easeOutCubic'
            }).animate({
                opacity: '0.95'
            }, {
                queue: false,
                duration: 400,
                easing: 'easeOutCubic'
            });
        } else {
            setTimeout(function() {
                $(element).find('.forward').stop().animate({
                    right: 0
                }, {
                    queue: false,
                    duration: 550,
                    easing: 'easeOutSine'
                }).animate({
                    opacity: 0
                }, {
                    queue: false,
                    duration: 300,
                    easing: 'easeOutSine'
                });
            }, 1000);
        }
    }

    $('.hover-area').hover(function() {
        toogler(this, 'show');
    }, function() {
        toogler(this, 'hide');
    });​

```

**[DEMO](http://jsfiddle.net/p4enD/10/)**
You need to call the [setTimeout](https://developer.mozilla.org/en/DOM/window.setTimeout) function, which will call a function after a given period of time. It is also advisable to keep track of where a call to the animation code exists chronologically, so that you don't run into animation artifacts.

```
var MOUSEOUT_ANIM_THRESHOLD = 5000;
var mouseInTime = {};

function onMouseOut( object, serial ) {
   if( serial < onMouseOut.serial ) {
       return;
   }

   $(object).find('.forward').stop()
       .animate({right:0}, {queue:false, duration:550, easing:'easeOutSine'})
       .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
}

onMouseOut.serial = 0;

$('.forward').css({opacity:0, right:0});
$('.hover-area').hover(function() {
    $(this).find('.forward').stop()
        .animate({right:20}, {queue:false, duration:300, easing:'easeOutCubic'})
        .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});

    mouseInTime[this] = new Date().getTime();
},function() {
    var deltaTime = new Date().getTime() - mouseInTime[this];

    if( deltaTime < MOUSEOUT_ANIM_THRESHOLD ) {
         setTimeout(onMouseOut, 250, this, onMouseOut.serial++); //250ms delay
    } else {
          $(object).find('.forward').stop()
              .animate({right:0}, {queue:false, duration:0})
              .animate({opacity:'0'}, {queue:false, duration:0});
    }
});

```