jquery - .delay divA，显示DivA时，自动隐藏DivB

Question

有代码吗，如果我设置.delay(500)显示divA，那么当divA显示时，divB会在检测到divA出现时自动隐藏。因为对于我的视觉设计，DivA 和 DivB 将在同一个地方。我不能在页面的 .delay 上使用太多，因为我害怕计时器问题，因为不是每个人都能很好地访问互联网。

有什么办法吗？因为我不是动画方面的专家，所以我使用gif动画进行。

我的视觉流程解释: 第一件事会显示一个大纸卷(它很近)，当我点击纸卷时，它会缩小然后移动到左侧，然后下一帧将卷出纸卷形式从左到右。

:((

Answer 1

您可以使用回调函数来检测第一件事何时完成其预期操作...

$('#divA').delay(500).fadeIn('slow', function() {
    // divA has finished loading.. NEXT.
    $('#divB').hide();
});

然后您可以继续执行 fadeOut() 等操作...

$('#divB').fadeOut('slow', function() {
    // Oh look, divB has just faded out!
});

---

最后，如果您将 #divA 设置为隐藏，而 #divB 可见，则 #divA 淡入并在结束时淡入淡入，#divB 淡出。

当然可以切换

.fadeIn('slow', function() . . . 改为 .show(function() ... 如果您不想要淡入淡出动画.

---

根据您的问题，您的最终代码:

<div id="divA" style="display:none">
    divA
</div>
<div id="divB">
    divB
</div>

<script type="text/javascript">
    $('#divA').delay(500).fadeIn('slow', function() {
        // divA has finished loading.. NEXT.
        $('#divB').fadeOut('slow');
    });
</script>