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

是否有任何代码，如果我将.delay（500）设置为divA，则在divA显示时，当检测到divA出现时divB将自动隐藏。因为对于我的视觉设计，DivA和DivB将在同一地方。我不能在页面的.delay上使用太多，因为我担心计时器问题，因为不是每个人都有良好的Internet访问。

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

我的视觉流程说明：
第一件事将显示一个大的纸卷（接近），当我单击该纸卷时，它会缩放小然后移到左侧，然后下一帧将被推出纸卷表格左到右。

：（（

最佳答案

您可以将回调函数用于此类操作，以检测第一件事何时完成了预期的操作...

$('#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>