maninaction (10) [Avatar] Offline
#1
what do you think this animation would do?

$(function(){
$('.animateMe').each(function(){
$(this).animate({
width: $(this).width() * 2,
height: $(this).height() * 2
}, 2000);
}).animate({
width: $(this).width() / 2,
height: $(this).height() / 2
}, 2000) ;
});

My guess was that a picture, for example, would grow to double size and then shrink to its original size.
Wrong. It keeps growing to my disbelieve, WHY?
maninaction (10) [Avatar] Offline
#2
Re: Ch 5, Listing 5.4, animation
This is how it should have been:

$(function(){
$('.animateMe').each(function(){
$(this).animate(
{ width: $(this).width() * 2, height: $(this).height() * 2 }, 2000)
.animate(
{ width: $(this).width() / 2, height: $(this).height() / 2 }, 2000);
});
});

In the previous version I closed the each function too soon with })
The lesson I learn is to format the code as I did here to really see what's going on.
bear.bibeault (675) [Avatar] Offline
#3
Re: Ch 5, Listing 5.4, animation
Indeed, with jQuery's powerful compound statements, coming up with a formatting scheme that clearly shows the organization of the statement is an important skill.

Within the width limitations of the printed page, I tried to make the structure of compound statements as clear as I could in the book examples.