# Adding delay in jQuery

**URL:** <https://forum.kirupa.com/t/adding-delay-in-jquery/281924>\
**Category:** Uncategorized\
**Created:** [February 15, 2009, 11:48am UTC](https://forum.kirupa.com/t/adding-delay-in-jquery/281924 "2009-02-15T11:48:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daimz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/daimz/32/2383_2.png) [@Daimz](https://forum.kirupa.com/u/Daimz)\
**Post date:** [February 15, 2009, 11:48am UTC](https://forum.kirupa.com/t/adding-delay-in-jquery/281924/1 "2009-02-15T11:48:18Z")

</div>

I have this:

```auto
jQuery.fn.sprites = function(settings) {
	settings = jQuery.extend({
		allowClick: true,
		show: {opacity: 'show'},
		hide: {opacity: 'hide'},
		active: 'active',
		click: 'click'
	}, settings);

	// Attach events to each child
	jQuery(this).children().each(function(){		

		// Do not attach events to active children
		if(!jQuery(this).hasClass(settings.active)){
			
			//hide the css defined :hover background
			jQuery(this).children('a').css({background: "none"});
			
			// Mouseover
			jQuery(this).hover(function() {
				jQuery('<div style="display:none"></div>').prependTo(this).animate(settings.show);		
			
			//Mouseout
			},function(){
				jQuery(this).children('div').animate(settings.hide, function(){
					jQuery(this).children('div').remove();
				});
			});
			
			//click events on the a if allowClick is true
			if(settings.allowClick){
				
				// Mousedown
				jQuery(this).children('a').mousedown(function(){
					jQuery(this).prev().addClass('click');
				//Mouseup
				}).mouseup(function(){
					jQuery(this).prev().removeClass('click');
				});
			}
			
		}
	});
};

```

and I am wanting to add a delay on to the hover show. How could I do this?