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

时间：2017-04-22 06:21:41

标签： javascript jquery html css

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

这就是我的代码正在做的事情，按钮点击，从下到上出现四个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");
        });
});

3 个答案:

答案 0 :(得分：2)

您可以将传递给.promise()的{​​{1}}个.animate()个来电链接到$.when()所有.then()来电后$.when() .animate()的任务返回已解决的jQuery承诺。

＆＃13;
＆＃13; 
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");
      })
  });
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

＆＃13;
＆＃13; 
	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");
			});
	});
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

根据.animate()的文档：

  

.animate（properties [，duration] [，easing] [，complete]）

完整的地方：

  

<强>完整
  输入：Function()
  动画完成后调用的函数，每个匹配元素调用一次。

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

相关问题
最新问题