使用 Jquery 时序淡入淡出

Question

我想要做的是：

1. 当用户点击触发器时，屏幕上会出现一个叠加层（这是有效的）
2. 叠加淡入后，我希望能够控制 UL 列表项淡入前的延迟时间
3. 列表项完成淡入后，我想触发其他两个元素在页面上淡入

现在我已经到了list-items淡入的程度，但我不知道如何控制淡入之前的时间。

谁能帮忙？

$(document).ready(function() {
  var square = $('.square');
  var ocn = $('.off-canvas-nav');
  var flag = false;

  square.click(function() {
    ocn.addClass('showOCN');
    flag = true;
    $(".mainNav li").each(function(i) {
      $(this).delay(300 * i).fadeIn(1000);
    });
  });
});

* {
  padding: 0;
  margin: 0;
}

.container {
  height: 100%;
  width: 100%;
  position: relative;
}

.page {
  border: 1px solid;
  width: 90%;
  height: 90%;
  min-height: 500px;
}

.square {
  height: 40px;
  width: 40px;
  position: relative;
  left: 50px;
  top: 10px;
  background-color: #444;
  cursor: pointer;
}

.off-canvas-nav {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .6);
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  transition: all .3s ease;
}

.showOCN {
  opacity: 1;
  z-index: 2;
}

.mainNav {
  list-style-type: none;
  left: 20%;
  top: 50px;
  position: relative;
}

.mainNav>li {
  margin: 30px 0px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="page">
    <div class="square"></div>
  </div>
  <div class="off-canvas-nav">
    <ul class="mainNav">
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
    </ul>
  </div>
</div>

Answer 1

您可以使用setTimeout() 来触发淡入：

setTimeout(function(){
  $(".mainNav li").each(function(i) {
    $(this).delay(300 * i).fadeIn(1000);
  });
}, 2000); //After 2 seconds

代码：

$(document).ready(function() {
  var square = $('.square');
  var ocn = $('.off-canvas-nav');
  var flag = false;

  square.click(function() {
    ocn.addClass('showOCN');
    flag = true;
    setTimeout(function() {
      $(".mainNav li").each(function(i) {
        $(this).delay(300 * i).fadeIn(1000);
      });
    }, 2000); //After 2 seconds
  });
});

* {
  padding: 0;
  margin: 0;
}

.container {
  height: 100%;
  width: 100%;
  position: relative;
}

.page {
  border: 1px solid;
  width: 90%;
  height: 90%;
  min-height: 500px;
}

.square {
  height: 40px;
  width: 40px;
  position: relative;
  left: 50px;
  top: 10px;
  background-color: #444;
  cursor: pointer;
}

.off-canvas-nav {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .6);
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  transition: all .3s ease;
}

.showOCN {
  opacity: 1;
  z-index: 2;
}

.mainNav {
  list-style-type: none;
  left: 20%;
  top: 50px;
  position: relative;
}

.mainNav>li {
  margin: 30px 0px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="page">
    <div class="square"></div>
  </div>
  <div class="off-canvas-nav">
    <ul class="mainNav">
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
    </ul>
  </div>
</div>

Answer 2

您可以简单地使用jQuery .promise() 和when()。

.promise( [type ] [, target ] )

描述：返回一个 Promise 对象来观察一个 绑定到集合的特定类型，无论是否排队，都已完成。

编辑添加了第二个承诺来显示一系列事件，请在下面的代码 sn-p 中尝试。

$(document).ready(function() {
  var square = $('.square');
  var ocn = $('.off-canvas-nav');
  var flag = false;
  var sleeptime = 3000; 
  function effect(obj,ms) {
  console.log("Sleep for ... "+ms/1000+" seconds!");
  // other javascript code ....
  return obj.delay(ms).addClass("sleepy");
  }
  square.click(function() {
    ocn.addClass('showOCN');
    square.removeClass("red blue");
    flag = true;
    console.clear();
    console.log( "Started..." );
    $.when( effect($(this),sleeptime) ).done(function() {  
    console.log("Waking up!\nAnimation start");
    $(".mainNav li").each(function(i) {
      $(this).delay(300 * i).fadeIn(1000);
    }).promise().done(function() {
    // put the rest of your javascript code here
    // e.g.
    ocn.removeClass('showOCN');
    $(this).hide();
    square.delay(2000).addClass("red").promise().done(function() { 
    square.delay(2000).addClass("blue");
    console.log( "Turned color blue!\nSecond Promise Finished!" );
    flag = false;
    });
    console.log( "Animation ended.\nFirst Promise Finished\n Turned color red!" );
  });
  });
  });
});

* {
  padding: 0;
  margin: 0;
}

.container {
  height: 100%;
  width: 100%;
  position: relative;
}

.page {
  border: 1px solid;
  width: 90%;
  height: 90%;
  min-height: 500px;
}

.square {
  height: 40px;
  width: 40px;
  position: relative;
  left: 50px;
  top: 10px;
  background-color: #444;
  cursor: pointer;
}
.red {
  background-color: #f00;
}
.blue {
  background-color: #00f;
}
.off-canvas-nav {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .6);
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  transition: all .8s ease;
}

.showOCN {
  opacity: 1;
  z-index: 2;
}

.mainNav {
  list-style-type: none;
  left: 20%;
  top: 50px;
  position: relative;
}

.mainNav>li {
  margin: 30px 0px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="page">
    <div class="square"></div>
  </div>
  <div class="off-canvas-nav">
    <ul class="mainNav">
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
    </ul>
  </div>
</div>