Run Function After One Function Is Complete - Jquery Animate

November 30, 2023 Post a Comment

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.

Html5 Guru

Run Function After One Function Is Complete - Jquery Animate

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Run Function After One Function Is Complete - Jquery Animate"