javascript - 在一个函数完成后运行函数 - JQuery animate

Question

我有一个简单的 jquery animate 函数在点击时运行，我想要的是，在动画完成后运行一个函数，这就是我正在做的，代码如下:

我的代码是这样的，点击按钮，从下到上出现四个div(默认div在-100%的底部位置)，每个div都有内容，预期的结果是，在所有内容之后出现内容加载了四个 div，但现在还没有发生。

更新

这是 JSFiddle Example

唯一的要求是在加载所有四列后显示 div 内容。

$(".menuitem-2").click(function() {
    $(".wwasection-one").stop(true, true).delay(2000).animate({
            bottom: 0
        }, 3000,
        function() {
            $(".wwa-gallery-content").stop(true, true).delay(18000).css("opacity", "0.4");
        });
    $(".wwasection-two").stop(true, true).delay(4000).animate({
            bottom: 0
        }, 5000,
        function() {
            $(".wwa-gallery-content").stop(true, true).delay(22000).css("opacity", "0.4");
        });
    $(".wwasection-three").stop(true, true).delay(5000).animate({
            bottom: 0
        }, 8000,
        function() {
            $(".wwa-gallery-content").stop(true, true).delay(32000).css("opacity", "0.4");
        });
    $(".wwasection-four").stop(true, true).delay(7000).animate({
            bottom: 0
        }, 10000,
        function() {
            $(".wwa-gallery-content").stop(true, true).delay(42000).css("opacity", "0.4");
        });
});

Answer 1

您可以将 .promise() 链接到传递给 $.when() 的 .animate() 调用以在 处执行任务>.then() 在所有 .animate() 调用返回已解析的 jQuery promise 之后链接到 $.when()。

var winw = $(document).width();
var winh = $(document).height();
$(document).ready(function() {
  $(".whoweareWrapper").height(winh);
  var settings = [
    {delay:2000, duration:3000},
    {delay:4000, duration:5000},
    {delay:5000, duration:8000},
    {delay:7000, duration:10000}
  ];
  $(".menuitem-2").click(function() {
    $.when.apply($, $.map($("[class~=wwasection]"), function(el, index) {
        return $(el).stop(true, true).delay(settings[index].delay)
               .animate({bottom: 0}, settings[index].duration).promise()
      }))
      .then(function() {
        $(".wwa-gallery-content").css("opacity", "0.4");
      })
  });
});

.whoweareWrapper {
  width: calc(100% - 130px);
  float: left;
  position: relative;
}

.wwasection {
  position: absolute;
  left: 0;
  bottom: -100%;
  height: 100%;
  width: 25%;
  border-right: 1px solid #f00;
  box-sizing: border-box;
}

.wwasection-one {
  background-color: #cdcdcd);
  left: 0;
}

.wwasection-two {
  background-color: #bdbdbd);
  left: 25%;
}

.wwasection-three {
  background-color: #c0c0c0);
  left: 50%;
}

.wwasection-four {
  background-color: #b0b0b0);
  left: 75%;
}

.wwa-opacity-mask {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  -ms-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
}

.wwa-gallery-content {
  max-width: 400px;
  margin: 0 auto;
  vertical-align: middle;
  top: 50%;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  transition: all 0.7s ease-in-out;
}

.wwa-gallery-content>h1 {
  color: #fff;
  font-size: 34px;
  font-family: 'Sansita', sans-serif;
  font-weight: 400;
  margin: 0;
}

.wwa-gallery-content>p {
  font-size: 16px;
  color: #fff;
  font-family: 'Sansita', sans-serif;
}

.wwa-opacity-mask:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.wwa-opacity-mask:hover .wwa-gallery-content {
  opacity: 0.7 !important;
}

.wwa-discover-btn {
  float: left;
  width: 100%;
  text-align: center;
  opacity: 0;
}

.wwa-discover-btn>a {
  font-size: 20px;
  text-decoration: none;
  color: #fff;
  font-family: 'Sansita', sans-serif;
  text-transform: uppercase;
  padding: 8px 20px;
  display: inline-block;
  border: 2px solid #fff;
}

.wwa-discover-btn>a:hover {
  background: #fff;
  color: #333333;
}

.wwa-opacity-mask:hover .wwa-gallery-content>.wwa-discover-btn {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gall-wrapper2" class="whoweareWrapper">
  <a href="#" class="menuitem-2">Show Div</a>
  <!-- Block One -->
  <div class="wwasection wwasection-one">
    <div class="wwa-opacity-mask">
      <div class="wwa-gallery-content">
        <h1>JOURNEY </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div id="discover1" class="wwa-discover-btn"> <a href="#">Discover</a> </div>
      </div>
      <div class="arrowdown" id="wwa-gallery-detail1"></div>
    </div>
  </div>
  <!-- Block Two -->
  <div class="wwasection wwasection-two">
    <div class="wwa-opacity-mask">
      <div class="wwa-gallery-content">
        <h1>PROJECTS DONE </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div id="discover1" class="wwa-discover-btn"> <a href="#">Discover</a> </div>
      </div>
      <div class="arrowdown" id="wwa-gallery-detail1"></div>
    </div>
  </div>
  <!-- Block Three -->
  <div class="wwasection wwasection-three">
    <div class="wwa-opacity-mask">
      <div class="wwa-gallery-content">
        <h1>FOUNDER INFO </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div id="discover1" class="wwa-discover-btn"> <a href="#">Discover</a> </div>
      </div>
      <div class="arrowdown" id="wwa-gallery-detail1"></div>
    </div>
  </div>
  <!-- Block Four -->
  <div class="wwasection wwasection-four">
    <div class="wwa-opacity-mask">
      <div class="wwa-gallery-content">
        <h1>PRESS & ACCREDIATIONS </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div id="discover1" class="wwa-discover-btn"> <a href="#">Discover</a> </div>
      </div>
      <div class="arrowdown" id="wwa-gallery-detail1"></div>
    </div>
  </div>
</div>