jquery - 如何使隐藏的 div 出现然后淡出（如果可能，在随机时间）？

Question

基本上我正在创建一种 8 位的城市场景。

我有三个div：

#city-back - 城市背后的背景
#city-middle - 我想要“随机闪烁”的 div，当前显示：无
#city-front - 8 位城市的图像

我需要的是让#city-middle div 突然出现，然后在半秒后迅速淡出以模仿远处的雷电/闪电。

是否可以让它在 3 到 8 秒之间的随机间隔内执行此操作，以使其看起来更逼真，而不是看起来像循环动画？

我尝试过通过 jQuery 查找方法，但是这对我的知识来说有点太高级了！

编辑：所以我已经将到目前为止的内容上传到 jsfiddle jsfiddle.net/At8et/1/
在本地运行的浏览器上对我来说可以正常工作，但在 JSFiddle 上不行？

Answer 1

这应该工作...

function flash(){
    setTimeout(function(){
        $("#city-middle").show();
        setTimeout(function(){
            $("#city-middle").fadeOut("fast");
        },100);
        flash();
    },(Math.random()*5000)+200);
}

Answer 2

使用Math.random()( mdn ) 和window.setTimeout()( mdn )。

//Show, then hide again after 0.2 - 1 seconds
function showCity() {
  $('#city-middle').show();
  window.setTimeout( hideCity, 200 + (Math.random() * 800) );
}

//Hide, then show again after 3-8 seconds
function hideCity() {
  $('#city-middle').hide();
  window.setTimeout( showCity, 3000 + (Math.random() * 5000) );
}

hideCity();