Question

在一系列动画中，我有一个我无法弄清楚的小错误。我正在为动画的不同部分运行延迟来对它们进行排序。对于这些div，我将它们设置为display:none，然后在延迟后将它们淡入。

对于这个特殊的动画，我正在切换滑动它的“面具”，所以不要像往常一样褪色。这导致我的其他div重叠到我原本认为它是z-index问题的地方，并非事实并非如此。问题是，我没有显示任何一个，因为我没有用fadeIn初始化它，所以background-color总是显示和破坏其他元素。

这是青色的蓝色背景，是background-color div的home-learn ....

我需要帮助弄清楚如何在延迟处理之前保持我的div home-learn不显示任何内容，然后将其显示为somwhow。

以下是代码：

#home-learn {
    color: #FFF;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 2.3em;
    z-index: 99;
    display: none;
}
#curtain-div {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #0085A1;
  top: 0;
  left: 0;
  z-index: 1;
}   

$(function(){
    $('#home-learn').css('display', 'block');
    $("#curtain-div").delay(15800).toggle("slide", {
        direction: "right"
      }, 1000);
});

<div id="home-learn">
        <div id="curtain-div"></div>
        Discover more...
    </div>

我需要弄清楚如何在延迟后让$('#home-learn').css('display', 'block');工作。

如果你需要看到这个，请在下面评论，我将添加该网站。

更新 - 添加HTML

<div class="blue">
        <div id="hand-wrap"><img src="/images/hand.png" class="hand" alt="HELLO"></div>
        <span class="hand-text">HELLO</span>
        <div class="circle">
            <div class="spinner top topright"></div>
            <div class="spinner top topleft"></div>
            <div class="spinner bottom bottomleft"></div>
            <div class="spinner bottom bottomright"></div>
            <div class="mask q2"></div>
            <div class="mask q4"></div>
        </div>
        <div id="circle-text">We're Optimum<br>Designs</div>
        <div class="aqua">
            <div id="aqua-text1">We transform ideas...</div>
            <div id="aqua-text2">...into reality.</div>
        </div>
        <div id="blue-home-text">We build beautiful, engaging sites for companies both large and small.</div>
        <div id="home-learn">
            <div id="curtain-div"></div>
            Discover more...
        </div>

Answer 1

对于这个问题：

我需要弄清楚如何在延迟后让$('#home-learn').css('display', 'block');工作。

使用queue()方法在延迟方法之后添加该行：

$("#curtain-div").delay(15800).queue(function() {
     $('#home-learn').css('display', 'block');
}).toggle("slide", {
     direction: "right"
}, 1000);

修改

为了证明这一点，我在这里添加一个小提琴：

https://jsfiddle.net/4vLLnxt1/

在延迟4秒后，您必须看到蓝色框。这非常有效。

第二次编辑

由于以下评论，请尝试更改：

$("#curtain-div").delay(15800).queue(function() {
     $('#home-learn').css('display', 'block');
     $(this).toggle("slide", {
          direction: "right"
     }, 1000);
});

第三次编辑

正如我们在评论中所说，所有问题都通过next参数解决。整个代码：

$("#curtain-div").delay(15800).queue(function(next) {
     $('#home-learn').css('display', 'block');
     next();
}).toggle("slide", {
     direction: "right"
}, 1000);

延迟功能后添加css显示块

1 个答案:

修改

第二次编辑

第三次编辑