Run Function After One Function Is Complete - Jquery Animate
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 doi
Solution 1:
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: 8px20px;
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;
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="gall-wrapper2"class="whoweareWrapper"><ahref="#"class="menuitem-2">Show Div</a><!-- Block One --><divclass="wwasection wwasection-one"><divclass="wwa-opacity-mask"><divclass="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><divid="discover1"class="wwa-discover-btn"><ahref="#">Discover</a></div></div><divclass="arrowdown"id="wwa-gallery-detail1"></div></div></div><!-- Block Two --><divclass="wwasection wwasection-two"><divclass="wwa-opacity-mask"><divclass="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><divid="discover1"class="wwa-discover-btn"><ahref="#">Discover</a></div></div><divclass="arrowdown"id="wwa-gallery-detail1"></div></div></div><!-- Block Three --><divclass="wwasection wwasection-three"><divclass="wwa-opacity-mask"><divclass="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><divid="discover1"class="wwa-discover-btn"><ahref="#">Discover</a></div></div><divclass="arrowdown"id="wwa-gallery-detail1"></div></div></div><!-- Block Four --><divclass="wwasection wwasection-four"><divclass="wwa-opacity-mask"><divclass="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><divid="discover1"class="wwa-discover-btn"><ahref="#">Discover</a></div></div><divclass="arrowdown"id="wwa-gallery-detail1"></div></div></div></div>Solution 2:
After reaching of last div to top:0 i.e. .wwasection-four you could change content opacity back to 1, as below,
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");
});
});
});.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: 8px20px;
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;
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="gall-wrapper2"class="whoweareWrapper"><ahref="#"class="menuitem-2">Show Div</a><!-- Block One --><divclass="wwasection wwasection-one"><divclass="wwa-opacity-mask"><divclass="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><divid="discover1"class="wwa-discover-btn"><ahref="#">Discover</a></div></div><divclass="arrowdown"id="wwa-gallery-detail1"></div></div></div><!-- Block Two --><divclass="wwasection wwasection-two"><divclass="wwa-opacity-mask"><divclass="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><divid="discover1"class="wwa-discover-btn"><ahref="#">Discover</a></div></div><divclass="arrowdown"id="wwa-gallery-detail1"></div></div></div><!-- Block Three --><divclass="wwasection wwasection-three"><divclass="wwa-opacity-mask"><divclass="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><divid="discover1"class="wwa-discover-btn"><ahref="#">Discover</a></div></div><divclass="arrowdown"id="wwa-gallery-detail1"></div></div></div><!-- Block Four --><divclass="wwasection wwasection-four"><divclass="wwa-opacity-mask"><divclass="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><divid="discover1"class="wwa-discover-btn"><ahref="#">Discover</a></div></div><divclass="arrowdown"id="wwa-gallery-detail1"></div></div></div></div>Solution 3:
Per the documentation for .animate():
.animate( properties [, duration ] [, easing ] [, complete ] )
Where complete is:
complete Type: Function() A function to call once the animation is complete, called once per matched element.
So you could define a function that you increments a counter and when the counter reaches 4 then all animations should be completed.
Post a Comment for "Run Function After One Function Is Complete - Jquery Animate"