一个函数完成后运行函数 - jQuery动画 [英] Run function after one function is complete - JQuery animate
本文介绍了一个函数完成后运行函数 - jQuery动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的代码是怎么做的，按钮点击，从下到上出现四个div（默认情况下，div在-100％底部位置），每个div都有内容，预期结果是，在所有四个div加载，这是不是现在正在发生。
更新
仅限要求显示所有四列加载后的div内容。
$（。menuitem-2）。click（ function（）{
$（。wwasection-one）。stop（true，true）.delay（2000）.animate（{
bottom：0
}，3000，
$ b $（。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）;
}）;
}）;
解决方案
您可以链接 .promise （）到 .animate（）调用传递给 $。任务在 .then（）链接到 $。when（）全部 .animate（ ）调用已返回已解析的jQuery promise。
$ b
data-console =truedata-babel =false>
.whoweareWrapper {width ：calc（100％ - 130px）;向左飘浮; position：relative;}。wwasection {position：absolute;左：0;底部：-100％;身高：100％;宽度：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）;宽度：100％;身高：100％;位置：绝对; -webkit-transition：全部.5s线性; -moz-transition：全部.5s线性; -ms-transition：全部.5s线性; -o-transition：全部.5s线性; transition：all .5s linear;}。wwa-gallery-content {max-width：400px;保证金：0汽车; vertical-align：middle;顶部：50％;位置：绝对;左：0;正确：0; text-align：center;不透明度：0;过渡：全部0.7s缓入;}。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;颜色：#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;宽度：100％; text-align：center; opacity：0;}。wwa-discover-btn> a {font-size：20px;文字修饰：无;颜色：#fff; font-family：'Sansita'，sans-serif;文字转换：大写; padding：8px 20px;显示：inline-block; border：2px solid #fff;}。wwa-discover-btn> a：hover {background：#fff;颜色：＃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-wrapper2class =whoweareWrapper> < a href =＃class =menuitem-2>显示Div< / a> <！ - 第一块 - > < 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 =discover1class =wwa-discover-btn> < a href =＃>发现< / a> < / DIV> < / DIV> < div class =arrowdownid =wwa-gallery-detail1>< / div> < / DIV> < / DIV> <！ - 方框2 - > < 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 =discover1class =wwa-discover-btn> < a href =＃>发现< / a> < / DIV> < / DIV> < div class =arrowdownid =wwa-gallery-detail1>< / div> < / DIV> < / DIV> <！ - 方块三 - > < 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 =discover1class =wwa-discover-btn> < a href =＃>发现< / a> < / DIV> < / DIV> < div class =arrowdownid =wwa-gallery-detail1>< / div> < / DIV> < / DIV> <！ - 区块四 - > < div class =wwasection wwasection-four> < div class =wwa-opacity-mask> < div class =wwa-gallery-content> < h1> PRESS&认证< / h1> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。< / p> < div id =discover1class =wwa-discover-btn> < a href =＃>发现< / a> < / DIV> < / DIV> < div class =arrowdownid =wwa-gallery-detail1>< / div> < / DIV> < / div>< / div>
I have a simple jquery animate function running on click, what I want is, run a function after animation is complete, This is how I am doing, code below:
This is how my code is doing, on button click, four div appearing from bottom to top (default the div is in -100% bottom position), each div have content, expected result is, appear the content after all the four div loaded, which is not happening right now.
UPDATE
This is the JSFiddle Example
Only requirement is to show the div content once all the four columns loaded.
$(".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");
});
});
解决方案
You can chain .promise() to .animate() calls passed to $.when() to perform task at .then() chained to $.when() after all .animate() calls have returned resolved jQuery promise.
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>
这篇关于一个函数完成后运行函数 - jQuery动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
