We have seen how to use the show() and hide() methods. jQuery has a range of other animation methods to make adding effects to your HTML fun and easy. Here are some of the more useful methods:

  • animate()
  • fadeTo()
  • fadeout()
  • fadeToggle()
  • slideUp()
  • slideDown()
  • slideToggle()

The animate() method

The animate() method can be used to perform a custom animation on CSS properties. The CSS property must however be numeric such as width, height, opacity, and font-size. Therefore CSS properties such as color, background-color and font-style cannot be animated.

Syntax
animate(properties, [duration], [easing], [complete])

  • Properties – the CSS property to animate and the value to animate towards. The property/ value pair are placed in curly brackets. Values are assumed to be in pixels. If other units of measurement such as '%' or 'em' are used, the whole value needs to be placed in quotes ie "1.2em".
  • Duration [Optional] – duration of animation in milliseconds or a string such as 'fast' (200) and 'slow' (600).
    Easing [Optional] - A string indicating which easing function to use for the transition. The default ease is 'swing' with 'linear' also available. (Plugins required for more ease options.)
  • Complete [Optional] - A function to call once the animation is complete.

Animation Method Examples

The following selects an element of ID 'box' and animates its height to 500px in one second. The CSS property to be animated is placed in curly brackets.

jQuery

$("#box").animate({height:500},1000);

JSFIDDLE Demo

CSS Multiple Word Properties

Many CSS properties have dashes in such as font-size, font-weight. These need extra care aand can be handled two ways. The following selects <h3> elements and animates their text size to 50px in one second. Note that the CSS property font-size is placed in quotes.

jQuery

$("h3").animate({"font-size":50},1000);

Alternatively you can replace the quoted "font-size" with the camel cased fontSize.

jQuery

$("h3").animate({fontSize:50},1000);

JSFIDDLE Demo

Animating Multiple Properties

Here we animate two properties. These are places in curly brackets, separate the property/value with a : colon and separate these pairs with a comma.

jQuery

$("div#header").animate({height:250,opacity:1},1000);

Adding easing

Here we add an ease of 'linear'.

jQuery

$("div#header").animate({height:250,opacity:1},1000, "linear");

JSFIDDLE Demo

Calling a function on Completion

In this example a function is called when the first animation is completed. Once the <div#header> has animated then a user defined function called 'arrived' is called. Note that the arrived() function does not need to be placed in side the $(document).ready function as it is not called until the document is ready anyway.

jQuery

$(document).ready(function(){
	$("div#header").animate({height:250,opacity:1},1000, "linear", arrived);
});

function arrived(){
	$("div#submenu").animate({opacity:1},1000);
}

The function called can be an inline call – that is you do not need to create a new function name but place all the logic inside the animate() method as a parameter ie

jQuery

$("div#header").animate({height:250,opacity:1},1000, "linear",
…function(){$("div#submenu").animate({opacity:1},1000);});

Welcome Message with animate()

In this example we will create a welcome banner to visitors to our site. When arriving at the page visitors will see this orange bar across the top of the page.

jQuery Drop down Animation

The CSS to create this would be.

CSS

#welcomeBanner{
	position:absolute;
	top:1px;
	left:1px;
	background-color:#FFCC66;
	width:100%;
	font-weight:bold;
	font-size:25px;
	text-align:center;
	padding:5px 10px;
	margin:0;
}

First we will add an event such that when the img is clicked the box will animate to shut. Inside the $(document).ready add the following.

jQuery

$("#welcomeBanner img").click(function(){
	// do something
});

At this stage you may choose to add an alert to test that the event is been triggered.

Now inside the event handler add an 'animate' method selecting the <div#welcomeBanner> and animating it up and fading it away. We will also add an inline function that will use the 'hide' method to clear the welcomeBanner. Note the use of the this' keyword.

jQuery

$("#welcomeBanner img").click(function(){
$("div#welcomeBanner").animate({height:0,opacity:0},"fast",function(){$(this).hide()});
});

The fadeTo(), fadeOut() and fadeToggle() methods

The fadeTo() method provides a shortcut to animating the CSS opacity property.

Syntax
.fadeTo( duration, opacity, [callback] )

  • Duration – duration of animation in milliseconds or a string such as 'fast' (200) and 'slow' (600).
  • Opacity - A number between 0 and 1 denoting the target opacity.
  • Callback [Optional] - A function to call once the animation is complete.

The fadeOut() method provides a shortcut to animating the CSS opacity property to zero. In addition the opacity property has reached zero the CSS property 'display' of the targeted element is set to 'none'.

Syntax
.fadeOut( [duration], [callback] )

  • Duration [Optional] – duration of animation in milliseconds or a string such as 'fast' (200) and 'slow' (600). If omitted then a default value of 400 is used.
  • Callback [Optional] - A function to call once the animation is complete.

In the example with the fade out welcome message we could therefore now use:

jQuery

$("#welcomeBanner img").click(function(){
	$("div#welcomeBanner").fadeOut();
});

The fadeToggle() method provides a shortcut to toggling the opacity of a selected element. Like the fadeOut() method it will set the CSS display property to none is the selection is faded out.

Syntax
.fadeToggle( [duration], [easing], [callback] )

  • Duration [Optional] – duration of animation in milliseconds or a string such as 'fast' (200) and 'slow' (600). If omitted then a default value of 400 is used.
  • Easing [Optional] - A string indicating which easing function to use for the transition. The default ease is 'swing' with 'linear' also available. (Plugins required for more ease options.)
  • Callback [Optional] - A function to call once the animation is complete.

To make the table of data fade in/out as in a previous example we would use:

jQuery

$(".toggleFig").click(function(){
	$(".facts").fadeToggle();
});

If you wish to have a callback but not duration and easing (as they are optional) then simple place the callback function in as a parameter ie:

jQuery

$(".facts").fadeToggle(function(){alert('Test')});

The slideUp(), slideDown() and slideToggle() methods

The slideDown() method is used to animate the CSS height property of the selected element.

Syntax
.slideDown( [duration], [easing], [callback] )

  • Duration [Optional] – duration of animation in milliseconds or a string such as 'fast' (200) and 'slow' (600). If omitted then a default value of 400 is used.
  • Easing [Optional] - A string indicating which easing function to use for the transition. The default ease is 'swing' with 'linear' also available. (Plugins required for more ease options.)
  • Callback [Optional] - A function to call once the animation is complete.

The slideUp() method animates the height of the matched elements. The lower parts of the selected element will slide up to hide its content. When the height reaches zero, the CSS display property is set to 'none' thus ensuring that the element no longer affects the layout of the page.

Syntax
.slideUp( [duration], [easing], [callback] )

  • Duration [Optional] – duration of animation in milliseconds or a string such as 'fast' (200) and 'slow' (600). If omitted then a default value of 400 is used.
  • Easing [Optional] - A string indicating which easing function to use for the transition. The default ease is 'swing' with 'linear' also available. (Plugins required for more ease options.)
  • Callback [Optional] - A function to call once the animation is complete.

The slideToggle() method provides a convenient way of toggling an element showing/hiding it via a slider effect.

Syntax
.slideToggle( [duration], [easing], [callback] )

  • Duration [Optional] – duration of animation in milliseconds or a string such as 'fast' (200) and 'slow' (600). If omitted then a default value of 400 is used.
  • Easing [Optional] - A string indicating which easing function to use for the transition. The default ease is 'swing' with 'linear' also available. (Plugins required for more ease options.)
  • Callback [Optional] - A function to call once the animation is complete.

To target an element with an ID selector of 'moreInfo' we would use.

jQuery

$("#moreInfo").slideToggle();

Leave a Comment