Question

在一系列动画中，我有一个小错误，我终于找到了导致它的原因。在所有动画上，我正在运行延迟来对它们进行排序。对于这些div，我将它们设置为display:none，然后将它们淡入。

对于这个特殊的动画，我是toggle从它上面滑动一个“面具”，所以不会像往常那样褪色。这导致我的其他div重叠到我认为我一直有z-index问题的位置。嗯，不是这样的。我需要帮助弄清楚在延迟处理之前我如何保持我的div home-learn不显示任何内容。

以下是代码：

#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);
});

如果我拿出$('#home-learn').css('display', 'block');，则根本没有任何显示。如何在动画开始后（延迟之后）显示home-learn？

<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

尝试设置JS函数以按顺序触发元素动画 -

例如，如果您希望DIV序列加载为DIV1＆gt; DIV2＆gt; DIV3＆gt; DIV4 -

<强> HTML

checkresult2.php

<强> JS

checkresult.php

因此，在CSS文件中，您可以使用<div class="class1 ani"></div> <div class="classwithanimation ani"></div> <div class="classafteranimation ani"></div> <div class="class4 ani"></div>＆amp; $(document).ready(function(){ $(".ani").delay(1000).each(function(index) { $(this).delay(1000*index).fadeIn(500); }); });个属性。＆＃34; ani＆＃34; JS确保只在前一个元素加载后才加载下一个元素。

我知道这不是确切的解决方案，但您认为可以根据您的需要进行自定义。

由于

Answer 2

尝试以下内容

$("#curtain-div").delay(2000).toggle("slide", function(){
    $('#home-learn').css('display', 'block');
});

添加背景颜色

#home-learn {
    color: #FFF;
    background: blue none repeat scroll 0 0;
    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;
}

让div在页面加载时不显示，然后在函数运行时显示块

2 个答案: