jQuery effects and transitions

Using the jQuery library really pays off when coding Effects and transitions. Coding these using just JavaScript is a laborious process which jQuery simplifies to the extent that most effects can be applied easily using only one or two lines of code.

Here is an example:

$('#imageBlock img').slideToggle(500);

In each of the examples below the number passed to the functions will control the speed of the transition. Lower numbers make the transition faster and a value of 0 will make it instantaneous. For example:

// a very quick transition
$('h2').slideIn(100);

// a very slow transition
$('h2').slideIn(1000);

Let's see how this works:

slideToggle()

The slideToggle() method alters the height of the selected element(s) to provide a show / hide animation. The fist call to this method will hide the selected element, the second will display it. This method uses a combination of two other methods, slideDown() and slideUp() each of which respectively hide and show the selected element in the same manner.

<div id="imageBlock" class="exampleblock left">
   <img src="images/jswebMinorLogo144x68.png" width="144" height="68" 
      alt="JSWeb Logo example" />
</div>

<script language="javascript" type="text/javascript">
// define a function which uses slideToggle() to show/hide the image
// 500 is the speed at which the animation runs
   function showHideImage() {
   
// this is the jQuery effect line
      $('#imageBlock img').slideToggle(500);
   }
</script>

<input type="button" value="Show / Hide image" onclick="showHideImage()" />

Live example

JSWeb Logo example

See also slideDown() and slideUp().

Some other jQuery effects inlclude:

toggle()

The toggle() method is similar to slideToggle() except that it alters both the width and height of the selected element(s).

This method combines the hide() and show() methods which respectively hide and show the selected element in the same manner.

$('#imageBlock img').toggle(500);

Live example

JSWeb Logo example

See also hide() and show().

fadeToggle()

The fadeToggle() method is similar to slideToggle() and toggle() except that, rather than altering the size of the selected elements, it alters the opacity. This provides a smooth fade in and out animation.

This method combines the fadeIn() and fadeOut() methods which respectively show and fade the selected element in the same manner.

$('#imageBlock img').fadeToggle(500);

Live example

JSWeb Logo example

See also fadeIn(), fadeOut() and fadeTo().

Further reading

These are only basic examples of what is possible with jQuery effects and transitions. Much more complex and impressive effects can be created with methods such as animate() and delay(). Using callback functions can also add another layer of interactivity as this allows animations to be chained together and executed in sequence.

Exercise!

Now open the jQuery effects and transitions exercise page and work through it.

You will need to use the jQuery documentation, specifically the effects section.

You may also use the JavaScript scratch pad to try out code quickly.