//OUTPUT: Animating other CSS properties with jQuery

<New code>

jQuery //INIT: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
— loads jQuery library

jQuery //OUTPUT: $( "#animateId" ).animate( { width: 300 + "px" } );
— animates the element until it's width equals 300px
jQuery //OUTPUT: $( "#animateId" ).animate( { width: "+=50px" } );
— animates the element until it's width is 50px greater than it started
jQuery //OUTPUT: $( "#animateId" ).animate( { opacity: 0 } );
— fades out an element to invisibility
jQuery //OUTPUT: $( "#animateId" ).animate( { opacity: 1 } );
— fades in an element from invisible to fully visible

jQuery //OUTPUT: $( "#animateId" ).animate( { width: 0, opacity: 0 }, { duration: 600 } );
— shrinks and fades an element out over 600 milliseconds (0.6 s)

jQuery //OUTPUT: $( "#animateId" ).stop();
— stops the animation immediately
jQuery //OUTPUT: $( "#animateId" ).clearQueue();
— clears the animation queue for that element

Let's animate something...

Remember the four steps to animating things

  1. Link to the jQuery library in the <head> of your page
  2. Give the element an id
  3. If it is going to move, change the positioning mode of the animated element using CSS
  4. Trigger the animation as Javascript code

You can animate ANY CSS property that uses a number

Animating border-width:


Notice that the CSS code for border-width had to convert to camelCase: borderWidth: 

$( '#button1Id' ).animate( { borderWidth: 40 + "px" } );

Animating font-size:


Notice that the CSS code for font-size had to convert to camelCase: fontSize: 

$( '#button2Id' ).animate( { fontSize: 40 + "px" } );

Animating width:


Notice that using += will add 40px of width with eack click: 

$( '#button3Id' ).animate( { width: "+=40px" } );

Animating height:


Notice that using += will add 40px of height with eack click: 

$( '#button4Id' ).animate( { height: "+=40px" } );

Animating opacity:


Notice that this is a two-part animation: fade out, then fade back in: 

$( '#button5Id' ).animate( { opacity: 0 } );

$( '#button5Id' ).animate( { opacity: 1 } );

There are more properties that you can animate if you check out the Learn more section

Combining animations into one step

There are plenty of times when you want to combine lots of animation steps into one.

For example, say I want to:

...all at the same time. This is possible because the animation information is held inside an object. So we can combine the object properties together: 

var animationProperties = {
	width: 		500 + "px",
	opacity:	1
};
$( '#msPacmanId' ).animate( animationProperties );

Or, for convenience, we can combine it all into one command:

$( '#msPacmanId' ).animate( {
	width: 		500 + "px",
	opacity:	1
} );

A common problem: expanding from the top left corner

You will notice that in the example above, it appears that Ms. Pacman is growing from her top left corner instead of expanding from the middle, like we would expect.

This is because javascript measures things from the top left corner of an element. If it expands in width, that width is measured from there.

If we want to make something look like it is expanding from it's middle, We also have to move it up, and left at the same time. 

$( '#msPacmanId' ).animate( {
	top:		"-=250px",	// half the change in height
	left:		"-=250px",  // half the change in width
	width: 		500 + "px",
	opacity:	1
} );

This is a handy effect if you want to make something look like it is blowing up.

Learn more