Response title
This is preview!
Improving jQuery Animation
in Using jQuery
•
8 years ago
Hi,
I'm developing a website wich contains a home section with an animation. I've been able to successfully code the animation using jQuery, you can see the blueprint of that project in here. Looking at it, you'll notice that the animation is simple, it consist's of animating the opacity of some divs inside the home section (the white blocks), and loop the animation forever (the home section background is with an animation function too, but that is not the case of this post).
However, I think my way of doing that ain't the best one, and I want to know about you guys how to improve that code, to make it more sofisticated.
- $(document).ready(function () {
- function animacao() {
- $("#anim1").delay('1200').animate({opacity: "0"}, 1000, function () {
- $("#anim2").delay('800').animate({opacity: "1"}, 1000, function () {
- $("#anim3").delay('600').animate({opacity: "1"}, 1000, function () {
- $("#anim4").delay('800').animate({opacity: "0"}, 1000, function () {
- $("#anim5").delay('400').animate({opacity: "1"}, 1000, function () {
- $("#anim6").delay('400').animate({opacity: "1"}, 1000, function () {
- $("#anim2").delay('800').animate({opacity: "0"}, 1000, function () {
- $("#anim1").delay('800').animate({opacity: "1"}, 1000, function () {
- $("#anim7").delay('800').animate({opacity: "1"}, 1000, function () {
- $("#anim3").delay('400').animate({opacity: "0"}, 1000, function () {
- $("#anim6").delay('400').animate({opacity: "0"}, 1000, function () {
- $("#anim4").delay('400').animate({opacity: "1"}, 1000, function () {
- $("#anim7").delay('400').animate({opacity: "0"}, 1000, function () {
- $("#anim5").delay('400').animate({opacity: "0"}, 1000, animacao)});
- });
- });
- });
- });
- });
- });
- });
- });
- });
- });
- });
- });
- };
- animacao();
- });
Thanks for the contributions.
1