jquery-animate

If you select a class or collection of elements to animate with jQuery: $('.myElems').animate({....}); And then also use the callback function, you end up with a lot of unneccessary animate() calls. var i=1; $('.myElems').animate({width:'200px'}, 200, function(){ //do something else $('#someOtherElem').animate({opacity:'1'}, 300, function(){ if (i>1) console.log('the '+i+'-th waste of resources just finished wasting your resources'); i++; }); }); Arguably this is just bad code and / or design - but is there something I can do that both avoids having many animate() calls with only one of them

I want to have 4 buttons/links on the beginning of the page, and under them the content. On the buttons I put this code: <a href="#idElement1">Scroll to element 1</a> <a href="#idElement2">Scroll to element 2</a> <a href="#idElement3">Scroll to element 3</a> <a href="#idElement4">Scroll to element 4</a> And under links there will be content: <h2 id="idElement1">Element1</h2> content.... <h2 id="idElement2">Element2</h2> content.... <h2 id="idElement3">Element3</h2> content.... <h2 id="idElement4">Element4</h2> content.... It is working now, but cannot make it look more smooth. I used this code

I'm trying to implement a jQuery function with an infinite loop to animate the body background with 3 colours. I cannot think of a nice and clean solution. Something like this? $(document).ready(function(){ $('body').animate({backgroundColor:'#ffcc00'}, 500, function(){ $('body').animate({backgroundColor:'#eeeeee'}, 500, function(){ $('body').animate({backgroundColor:'#3b5998'}, 500); }); }); }); Any idea? Diodeus - James MacFarlane You can eliminate the nesting, but the solution is a little fatter: var cols = "#ffcc00,#eeeeee,#3b5998".split(",") var cPos = 0 $(document).ready(function() {