文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在一个函数完成后运行函数- JQuery动画

问在一个函数完成后运行函数- JQuery动画
EN

Stack Overflow用户
提问于 2017-04-22 06:21:41
回答 3查看 136关注 0票数 0

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

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

更新

这是JSFiddle实例

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

代码语言：javascript
复制
$(".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");
        });
});
css
javascript
jquery
html
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-04-22 06:41:55

您可以将.promise()链接到传递给$.when()的.animate()调用，以便在所有.animate()调用返回解决jQuery承诺后在.then()执行任务。

​

代码语言：javascript
复制
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");
      })
  });
});
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2017-04-22 06:50:47

在last div到达top:0 (即.wwasection-four )之后，您可以将内容opacity更改为1，如下所示，

​

代码语言：javascript
复制
	var winw = $(document).width();
	var winh = $(document).height();
  $(document).ready(function() { 
  $(".whoweareWrapper").height(winh);
  $(".menuitem-2").click(function() {
		$(".wwasection-one").stop(true, true).delay(2000).animate({
				bottom: 0
			},3000 ,
		function() {
				$(".wwa-gallery-content").css("opacity", "0");
			});
		$(".wwasection-two").stop(true, true).delay(4000).animate({
				bottom: 0
			},5000,
			function() {
				$(".wwa-gallery-content").css("opacity", "0");
			});
		$(".wwasection-three").stop(true, true).delay(5000).animate({
				bottom: 0
			}, 8000,
      function() {
				$(".wwa-gallery-content").css("opacity", "0");
			});
		$(".wwasection-four").stop(true, true).delay(7000).animate({
				bottom: 0
			}, 10000 ,
      function() {
				$(".wwa-gallery-content").css("opacity", "1");
			});
	});
});
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2017-04-22 06:40:57

根据.animate()的文档

.animate(属性、持续时间、完成)

完整的地方是：

完全 类型：功能() 动画完成后调用的函数，每个匹配的元素调用一次。

因此，您可以定义一个函数来增加一个计数器，当计数器达到4时，所有的动画都应该完成。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/43555971

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档