Question

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

我有三个div：

＃city-back - 城市背后的背景 #city-middle - 我希望“随机闪烁”的div，当前显示：none
#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();

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

2 个答案: