分享程序员开发的那些事...
更新时间：2022-10-19 07:44:07
您可以链接 .promise （）到 .animate（）调用传递给 $。任务在 .then（）链接到 $。when（）全部 .animate（ ）调用已返回已解析的jQuery promise。
.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>