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
Post a Comment