The idea is to animate a cloud div and to have it animate back and forth horizontally in perpetuity. This works, but unfortunately I think it's prone to memory leaks and UI lag. Any advice would be appreciate, thanks.
function animateCloud() {
$('#cloud').animate({ right: '+=500' }, { duration: 35000, easing: "linear", queue: true });
animateOpposite();
}
function animateOpposite() {
$('#cloud').animate({ right: '-=500' }, { duration: 35000, easing: "linear", queue: true });
animateCloud();
}
$(document).ready(function() {
animateCloud();
});
I don't think that your code leaks memory at all, but you can create the call shorter.
function animateCloud() {
$('#cloud').animate({ right: '+=500' }, { duration: 35000, easing: "linear" })
.animate({ right: '-=500' }, { duration: 35000, easing: "linear", complete: animateCloud });
}
example: http://www.jsfiddle.net/bh3f4/
http://api.jquery.com/animate/
Use the optional callback argument. When an animation finishes, jquery will call your function. Perfect time to animate other direction.
Related
Functionality:
When user clicks on a button from page 1, it will bring them to page 2. During the page transition, I have included in a few animation:
1.) Button will explode.
2.) Page 1 will slideout and fade out while page 2 will slidein and fade in and bounce a lil.
What has been done:
I have made use of .animate & .toggle jQuery to achieve the following animation during page transition.
Issue:
Working fine:
Page transition: when user clicks from page 1 to page 2 and when user navigates from page 2 to page 1.
Animation: Button exploding when user clicks on the button and page sliding and fading.
what is not working fine is that when user navigates back from page2 to page 1, the button that performs the explosion animation has disappeared and is not displayed in the original position.
What has happened?
**Code:
function PageTransit() {
$('#Button1').toggle("explode", {
duration: slideDuration
}, {
easing: 'easeOutElastic',
queue: false
});
$('#Page1').fadeOut({
duration: slideDuration,
queue: false
});
$('#Page1').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
//Method call to slide and fade in second page to the left padding
$('#Page2').fadeIn({
duration: slideDuration,
queue: false
});
$('#Page2').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
}
function Page() {
console.log("Page");
$('#Page2').fadeOut({
duration: slideDuration,
queue: false
});
$('#Page2').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
$('#Page1').fadeIn({
duration: slideDuration,
queue: false
});
$('#Page1').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
}
<div id="Page1" align="center" style="position:absolute; width:1920px; height:1080px; z-index=1; top:0px; left:0px;">
<img src="lib/img/Background.png" />
<button id="Button1" onclick="PageTransit()">
<img src="lib/img/Button.png">
</button>
<button id="Back" onclick="Home()">
<img src="lib/img/HomeButton.png">
</button>
</div>
<div id="Page2" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=2; top:0px; left:1921px; ">
<button id="PageBack" onclick="Page()">
<img src="lib/img/VideoBackButton.png">
</button>
</div>
**
As Pointed out by user cske, that you will need to put back the .toggle'explode' at the page back function.
function PageTransit() {
$('#Button1').toggle("explode", {
duration: slideDuration
}, {
easing: 'easeOutElastic',
queue: false
});
$('#Page1').fadeOut({
duration: slideDuration,
queue: false
});
$('#Page1').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
//Method call to slide and fade in second page to the left padding
$('#Page2').fadeIn({
duration: slideDuration,
queue: false
});
$('#Page2').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
}
function Page() {
console.log("Page");
$('#Button1').toggle("explode", {
duration: slideDuration
}, {
easing: 'easeOutElastic',
queue: false
});
$('#Page2').fadeOut({
duration: slideDuration,
queue: false
});
$('#Page2').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
$('#Page1').fadeIn({
duration: slideDuration,
queue: false
});
$('#Page1').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
}
I've just discovered the Web Animations API, and I'm trying to figure out how to introduce a callback function for these animations..I've tried using the following
$('.box_wrapper')[0].animate([
{ right: '-100%' },
{ right: 0 }
], {
fill: 'forwards',
duration: 1000,
onfinish: function() {
// do stuff
}
});
Looking at the w3c spec on this section I thought that the onfinish property is what I'd need to use, but nothing happens.
I've also tried using the jQuery callback syntax;
$('.box_wrapper')[0].animate([
{ right: '-100%' },
{ right: 0 },
], {
fill: 'forwards',
duration: 1000
}, function() {
// do stuff
});
But of course this doesn't work either. Any Ideas, I'm sure it's something simple, I've just not been able to find the info yet.
I nearly had it right, with a small tweak like so, the callback works;
$('.box_wrapper')[0].animate([
{ right: '-100%' },
{ right: 0 }
], {
fill: 'forwards',
duration: 1000
}).onfinish = function() {
// do stuff
};
I am using the following side slide menu for my project :-
http://www.mywork.com.au/blog/demos/facebook-sidebar-menu/
I've changed the left slide-in to right slide-in. It works very well for me on the desktop but in ipad and phone the page wrapper has a lagging-behind/scrolling effect. It seems like that the page wrapper scrolls from right to the left under the side menu container after the menu has appeared.
I've tried using "fast", "slow" and other properties of animate but don't seem to figure out what exactly needs to be done.
$(".m-menu").toggle(function() {
$('#mobile-menu-bg').animate(
{ right: '0', speed: '1500' },
1500
//{ duration: 500, queue: false },
);
$('#page-wrapper').animate(
{ 'margin-left': '-80%', speed: '1000' },
1000
//{ duration: 500, queue: false }
);
}, function() {
$('#mobile-menu-bg').animate(
{ right: '-80%' }
//{ duration: 500, queue: false }
);
$('#page-wrapper').animate(
{ 'margin-left': '0' }
//{ duration: 500, queue: false }
);
}
);
Please help
I saw another post on here saying this would work - and it's definitely not. Wondering why these are not all executing at once?
I am simply trying to get the top and opacity animations to happen at once. Here's a fiddle: http://jsfiddle.net/DU8N2/
$(".wordcar").animate({
top:"32px"
}, { duration: 2000, queue: false });
$(".wordcar li.next").animate({
opacity:"1"
}, { duration: 2000, queue: false });
$(".wordcar li.current").animate({
opacity:"0.2"
}, { duration: 2000, queue: false });
$(".wordcar li.ondeck").animate({
opacity:"0.2"
}, { duration: 2000, queue: false });
$(".wordcar li.previous").animate({
opacity:"0.0"
}, { duration: 2000, queue: false });
It's not in a queue. Try setting the fade animations duration: 1000, instead of 2000 and there you have your magic.
I have two jquery animations one by other:
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing,
complete: complete
});
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing,
complete: complete
});
I want the animations to run simultanusly so I use {queue: false}:
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false,
complete: complete
});
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false,
complete: complete
});
But now the completed callback called twice! How can I know exactly when does the both animations are done?
Using jQuery deferred methods try
$.when(
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing
}),
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing
})
).done( function( ) {
alert("done!");
});
Fiddle here
Why not remove the complete handler from one of the animations?
From the extract of code that you've posted, it looks as though you're using the same duration and easing methods on both animations. Therefore it's inherently true that they will complete at the same time, so long as they're being called at the same time...
this may sounds like something complicated, but why not Deferred Objects ?
http://api.jquery.com/category/deferred-object/
you may investigate more here
jQuery animation with deferred pipes?
According to http://darcyclarke.me/development/using-jquery-deferreds-with-animations/:
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false
});
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false
});
$.when(books, laptops).done(complete);