jquery - What's the best way to add a delay and transition of overlay DIV being shown? -


i'm not @ js, please bear me.

i've got portion of code makes overlay appear on site when menu hovered over.

$('#menu-main-menu > .menu-parent-item').hover(     // when hovered         function() {             $('#overlay').css('display','block');         },     // when not hovered         function() {             $('#overlay').css('display','none');         } ); 

the overlay div shown instantly when mouse hovers on menu. menu items have nice css fade come in, i'd apply either smooth transition, or delay overlay div.

can added code, or better being performed css transition also?

use fadein/fadeout duration like

$('#menu-main-menu > .menu-parent-item').hover(     // when hovered         function() {             $('#overlay').fadein(1000);         },     // when not hovered         function() {             $('#overlay').fadeout(1000);         } ); 

alternately, can use show/hide duration maintain display:block/none

$('#menu-main-menu > .menu-parent-item').hover(     // when hovered         function() {             $('#overlay').show(1000);         },     // when not hovered         function() {             $('#overlay').hide(1000);         } ); 

Comments

Popular posts from this blog

xslt - Substring before throwing error -

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

oracle - Changing start date for system jobs related to automatic statistics collections in 11g -