jquery - How to make a hidden div appear then fade out (at random times if possible)? -

basically creating sort of 8-bit city scene.

i have 3 divs:

#city-back - background behind city
#city-middle - div want "flashing @ random" display:none
#city-front - image of 8-bit city

what need #city-middle div appear, fade out after half second sort-of imitate distant thunder/lightning.

is possible have in random interval between 3 - 8 seconds looks lot more realistic rather looking looped animation?

i have tried looking ways via jquery, bit advanced knowledge!

edit: i've uploaded have far jsfiddle jsfiddle.net/at8et/1/
works fine me on browser running locally, not on jsfiddle?

use math.random() (mdn) , window.settimeout() (mdn).

//show, hide again after 0.2 - 1 seconds function showcity() {   $('#city-middle').show();   window.settimeout( hidecity, 200 + (math.random() * 800) ); }  //hide, show again after 3-8 seconds function hidecity() {   $('#city-middle').hide();   window.settimeout( showcity, 3000 + (math.random() * 5000) ); }  hidecity();