Question

我要做的是以下内容：

当用户点击触发器时，屏幕上会出现一个叠加层（此功能正常）
叠加淡入后，我希望能够控制UL列表项之前的延迟时间淡入
一旦列表项完成淡入，我想触发其他两个元素淡入页面

现在我刚刚达到了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()来触发fadeIn：

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

代码：

＆＃13;

$(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
  });
});

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 2

您只需使用jQuery .promise()和when()即可。

。承诺（ [type] [，target] ）

说明：返回一个Promise对象，以观察a的所有操作   某个绑定到集合的类型，排队与否，已完成。

修改添加了显示一系列事件的第二个承诺，请在下面的代码段中尝试。

＆＃13;

$(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!" );
  });
  });
  });
});

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

时间淡入淡出使用Jquery

2 个答案: