使用Jquery实现按顺序渐变的定时效果

Question

我想要做的是以下几点：

1. 当用户点击触发器时，屏幕上会出现一个覆盖层（这个已经实现了）； 2. 覆盖层淡入后，我希望能够控制 UL 列表项淡入之前的延迟时间； 3. 一旦列表项完成淡入，我希望触发页面上另外两个元素的淡入效果。

目前，我只能让列表项淡入，但不知道如何控制它们淡入之前的时间。请问有人可以帮忙吗？

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

- Theodore Steiner

---

你在某个时候更改了问题的一部分，并没有回答所有的部分。请检查最后一次编辑 ;) 谢谢 - user2560539

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>

- Zakaria Acharki

---

这太完美了，非常感谢！我可以问个追加问题吗？ - Theodore Steiner

所以我要添加一个关闭按钮来切换屏幕，并且使它这样，如果用户点击任何不是链接的东西，则离开画布的导航，将动画重新播放一次触发器再次被点击吗？ - Theodore Steiner

不确定你指的是哪个链接，但尝试使用你描述的更改更新 fiddle，或者如果必要的话发布一个新问题。 - Zakaria Acharki

Answer 2

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

.promise( [type ] [, target ] )

描述：返回一个Promise对象，以观察绑定到集合的特定类型的所有操作（无论是否排队）何时完成。

编辑：添加第二个Promise以显示事件链，请在下面的代码片段中尝试它。

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

- user2560539