Question

我想做什么：

使用三个占用相同尺寸的div，默认情况下都为display: none;

将2张图片加载到第二个div
显示第一个div为500毫秒
显示第二个div为500毫秒
然后显示第3个div。

看起来够简单吗？

奇怪的是，就像15％的时间它似乎等待第一个div并显示更长时间，然后第二个div将永远不会被看到，似乎直接进入第三个div。

HTML：

<div id="div1">...</div>
<div id="div2"><div id="img1"></div><div id="img2"></div></div>
<div id="div3">...</div>

尝试＃1：

var focus_length = 500;
var stimuli_length = 500;

// dummy values
var newimg1 = 'https://www.google.com/intl/en_com/images/srpr/logo3w.png';
var newimg2 = 'https://www.google.com/intl/en_com/images/srpr/logo3w.png';


console.log("step 1");
$("#div1").show();
$("#img1, #img2").empty();
$("#img1").append($(document.createElement('img')).attr('src', newimg1));
$("#img2").append($(document.createElement('img')).attr('src', newimg2));

window.setTimeout(
    function () {
        console.log("step 2");
        $('#div1').hide();
        $('#div2').show();
    }, focus_length);

window.setTimeout(function () {
    console.log("step 3");
    $('#div2').hide();
    $('#div3').show();
}, focus_length + stimuli_length);

第二种变体（相同的表现行为）：

console.log("step 1");
$("#div1").show();
$("#img1, #img2").empty();
$("#img1").append($(document.createElement('img')).attr('src', newimg1));
$("#img2").append($(document.createElement('img')).attr('src', newimg2));

window.setTimeout(
    function () {
        console.log("step 2");
        $('#div1').hide();
        $('#div2').show();

        window.setTimeout(function () {
            console.log("step 3");
            $('#div2').hide();
            $('#div3').show();
        }, stimuli_length);
    }, focus_length);

我也尝试过设置opacity = 1或0而不是使用jquery show / hide，结果相同。

真正奇怪的是，即使遇到这个问题 3个console.log（）消息的时间仍然相隔500毫秒！所以它就像是javascript正确调用它但浏览器只是不打算实际显示重绘。更奇怪的是，这种情况发生在Chrome和Safari上。

更新

我尝试将stimuli_length设置为1000以上。有了这个改变，它有时会在第一个div上稍微滞后，并且显示第二个div的时间较短，但似乎并没有完全跳过它。然而，500ms是严格的设计要求。

Answer 1

在您显示第一个div后添加$("#div2, #div3").hide();使其在jsfiddle中适用于我。

Answer 2

也许这里有一些动态附加你的图像。即使你显示div，如果图像没有时间加载，它看起来就像从未显示过一样。

您是否尝试过延迟10秒钟的延迟以确保（或几乎）图像有时间加载？

Answer 3

为什么不使用

('#div1').show(timeinmiliseconds);

它可以解决您的问题，也可以一个接一个地使用回调喜欢

('#div1').show(timeinmiliseconds,('#div2').show(timeinmiliseconds, ('#div3').show(timeinmiliseconds);););

切换显示div分开500毫秒

3 个答案: