javascript - Click Image Changes BG Image of Parent Div & Loads Div 5 Secs Later -

javascript - Click Image Changes BG Image of Parent Div & Loads Div 5 Secs Later -

i'm trying create video player mockup friends website , need bit of help jquery/javascript

here html

<div id="video"> <div id="notification"><span>lorem ipsum.</span></div> <img id="loading" src="loading.gif" /> <img id="play" src="playbutton.png" style="width: 100%" /> </div>

#video has background of looks video player, want

when utilize clicks on #play alter background image having image black black screen then #loading appear then 5 seconds later want #notification appear

how do this?

you need add together style 'display:none' elements want hidden.

and attach onclick handler #play div can jquery function .on

for example:

$('#play').on('click',function() { //remove image $('#play').hide(); //display loading panel $('#loading').css('display','block'); settimeout(function(){ //display notification $('#notification').css('display','block'); }, 5000); }

the settimeout function give delay.

javascript jquery html