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

javascript - oscilloscope of speaker input stops rendering after a few seconds -

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

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -