Jenkov.com
Tutorials Books About
Jquery

1 jQuery Tutorial
2 jQuery Overview
3 jQuery Installation
4 jQuery $(document).ready()
5 jQuery Selection
6 jQuery Traversal
7 jQuery & CSS
8 jQuery & DOM
9 jQuery & Events
10 jQuery Effects
11 jQuery AJAX
12 jQuery Deferred Objects
13 jQuery Plugins
14 jQuery Critique




jQuery Effects


JQuery enables you to apply certain standard effects to HTML elements in your page. Each effect is carried out by calling a special effect function in JQuery. The most common of these effect functions are:

Here are a few examples. Click the buttons to see the results. Start with the "Show" button.





show()

The show() method can show a hidden element, for instance a div or an img element. Here is a simple example:

$('#theImg').show();

An HTML element can be hidden via the hide() method, or via CSS, like this:

<img id="theDiv" style="display: none" src="..." />

You can pass a speed to the show() method which tells JQuery how fast to show the element. You choose between three predefined speeds, or a custom number of milliseconds. Here are a few examples:

$('#theImg').show('slow');
$('#theImg').show('medium');
$('#theImg').show('fast');
$('#theImg').show(2000);

Note: In Firefox it may look better to put an img inside a div, and then hide and show the div, than hiding and showing the img directly. You'll have to play around with that, to see what works best for your page.

It is also possible to pass a function to show() which is executed once the element is fully shown. Here are a few examples of that:

$('#theImg').show(function(){ alert('shown');} );
$('#theImg').show(2000, function(){ alert('shown');} );

hide()

The JQuery hide() method can hide an HTML element. Just like with show(), there are a few speeds you can choose from, including setting your own speed in milliseconds. Here are a few code examples:

$('#theDiv').hide();
$('#theDiv').hide('slow');
$('#theDiv').hide('medium');
$('#theDiv').hide('fast');
$('#theDiv').hide(2000);

It is also possible to pass a function to hide() which is executed once the element is fully hidden. Here is how:

$('#theDiv').hide(function(){ alert('shown');} );
$('#theDiv').hide(2000, function(){ alert('shown');} );

toggle()

The JQuery toggle() function toggles the visibility state of an HTML element. In other words, if the element is hidden, it will be shown. If it is shown, it will be hidden. Again, you can set the speed of the toggling via a parameter. Here are a few examples:

$('#theDiv').toggle();
$('#theDiv').toggle('slow');
$('#theDiv').toggle('medium');
$('#theDiv').toggle('fast');
$('#theDiv').toggle(2000);

It is also possible to pass a function to toggle() which is executed once the element is fully toggled. Here is how:

$('#theDiv').toggle(function(){ alert('shown');} );
$('#theDiv').toggle(2000, function(){ alert('shown');} );

slideDown()

The slideDown() function slides down a hidden HTML element, so it becomes visible. Like with the show() and hide() functions, you can set the speed as a parameter to the function. Here are a few examples:

$('#theDiv').slideDown();
$('#theDiv').slideDown('slow');
$('#theDiv').slideDown('medium');
$('#theDiv').slideDown('fast');
$('#theDiv').slideDown(2000);

You can also pass a callback function to slideDown() which is executed once the sliding is fully done. Here are a few example:

$('#theDiv').slideDown(function(){ alert('done');} );
$('#theDiv').slideDown(2000, function(){ alert('done');} );

slideUp()

The slideUp() function hides a visible HTML elmeent by sliding it up. Like with the show() and hide() functions, you can set the speed as a parameter to the function. Here are a few examples:

$('#theDiv').slideUp();
$('#theDiv').slideUp('slow');
$('#theDiv').slideUp('medium');
$('#theDiv').slideUp('fast');
$('#theDiv').slideUp(2000);

You can also pass a callback function to slideUp() which is executed once the sliding is fully done. Here are a few example:

$('#theDiv').slideUp(function(){ alert('done');} );
$('#theDiv').slideUp(2000, function(){ alert('done');} );

slideToggle()

The slideToggle() function shows an HTML element if it is hidden, or hides it if visible. It does so by sliding the HTML element up and down. Here are a few examples:

$('#theDiv').slideToggle();
$('#theDiv').slideToggle('slow');
$('#theDiv').slideToggle('medium');
$('#theDiv').slideToggle('fast');
$('#theDiv').slideToggle(2000);

You can also pass a callback function to slideToggle() which is executed once the sliding is fully done. Here are a few example:

$('#theDiv').slideToggle(function(){ alert('done');} );
$('#theDiv').slideToggle(2000, function(){ alert('done');} );

fadeIn()

The fadeIn() function fades in a hidden HTML element. Like with the show() and hide() functions, you can set the speed as a parameter to the function. Here are a few examples:

$('#theDiv').fadeIn();
$('#theDiv').fadeIn('slow');
$('#theDiv').fadeIn('medium');
$('#theDiv').fadeIn('fast');
$('#theDiv').fadeIn(2000);

You can also pass a callback function to fadeIn() which is executed once the fading is fully done. Here are a few example:

$('#theDiv').fadeIn(function(){ alert('done');} );
$('#theDiv').fadeIn(2000, function(){ alert('done');} );

fadeOut()

The fadeOut() function fades out a visible HTML element. Like with the show() and hide() functions, you can set the speed as a parameter to the function. Here are a few examples:

$('#theDiv').fadeOut();
$('#theDiv').fadeOut('slow');
$('#theDiv').fadeOut('medium');
$('#theDiv').fadeOut('fast');
$('#theDiv').fadeOut(2000);

You can also pass a callback function to fadeOut() which is executed once the fading is fully done. Here are a few example:

$('#theDiv').fadeOut(function(){ alert('done');} );
$('#theDiv').fadeOut(2000, function(){ alert('done');} );

fadeToggle()

The fadeToggle() function shows an HTML element if it is hidden, or hides it if visible. It does so by fading the HTML element in and out. Here are a few examples:

$('#theDiv').fadeToggle();
$('#theDiv').fadeToggle('slow');
$('#theDiv').fadeToggle('medium');
$('#theDiv').fadeToggle('fast');
$('#theDiv').fadeToggle(2000);

You can also pass a callback function to fadeToggle() which is executed once the fading is fully done. Here are a few example:

$('#theDiv').fadeToggle(function(){ alert('done');} );
$('#theDiv').fadeToggle(2000, function(){ alert('done');} );

fadeTo()

The fadeTo() function enables you to fade an HTML element partially in or out, making it transparent. You pass parameter between 0 and 1 which tells how much to fade the element. 0 is fully transparent (hidden), and 1 is fully opaque (shown). Like with the show() and hide() functions, you can set the speed as a parameter to the function. Here are a few examples:

$('#theDiv').fadeTo(0.5);
$('#theDiv').fadeTo('slow', 0.5);
$('#theDiv').fadeTo('medium', 0.5);
$('#theDiv').fadeTo('fast', 0.5);
$('#theDiv').fadeTo(2000, 0.5);

You can also pass a callback function to fadeTo() which is executed once the fading is fully done. Here are a few example:

$('#theDiv').fadeTo(0.5, function(){ alert('done');} );
$('#theDiv').fadeTo(2000, 0.5, function(){ alert('done');} );

Note:
If you fade an HTML element to e.g. 0.5, and then call the fadeOut() function, and after that the fadeIn() function, the HTML element will only be faded back in to 0.5, not to 1.0. You can see this effect by playing with the example buttons at the top of the page.

animate()

The JQuery animate() function enables you to animate HTML elements in your page. Not every attribute can be animated. Only numerical CSS attributes can. For instance, you can animate

Animating a CSS attribute changes it gradually from the value it had before the animation started, to a value specified in the animate() function call.

Here are two examples:

$('#theDiv').animate({"height" : 300}, 'slow');
$('#theDiv').animate({"width"  : 200}, 'slow');

You can animate more than one property at a time, by putting more properties into the object parameter. Here is an example that animates both width and height at the same time, instead of one after the other:

$('#theDiv').animate({"height" : 250, width:250 }, 'slow');

You can also pass a callback function to the animate() function, which is executed once the animation is finished. Here is an example:

$('#theDiv').animate({"width"  : 200}, 'slow',
    function(){ alert('done'); } );

Camel Case

You might have noticed that some of the CSS properties are written in a mixture of uppercase and lowercase letters. This is because JavaScript object properties cannot contain hyphens. For instance, the CSS property border-width cannot directly be written as a property of a JavaScript object. This example would fail to be parsed:

$('#theDiv').css({ border-width : 1 });

To address CSS properties with hyphens in your animations etc. you must either quote the property name, like this:

$('#theDiv').css({ "border-width" : 1 });

or use a camel case version of the property, like this:

$('#theDiv').css({ borderWidth : 1 });

The examples above only showed the property naming used inside the css() function. However, the same rules apply inside the animate() function.

Toggle Animation

It is possible to "toggle animate" an HTML element. For instance, if you toggle animate the width then the first time the animation is executed, the width will be animated down to 0. Second time you execute the animation, the width is animated back to the value it had before the first animation. Here is an example:

$('#theDiv').animate({"width"  : 'toggle'}, 'slow' );

You might have to play around a little with this function to get it to work properly. I have experienced that sometimes only one of the given CSS properties are animated etc. and I have not yet found out why (what I am doing wrong, in other words). But it seems to work fine if you first toggle the HTML element into visibility with it, and then to invisibility again. If you start the other way around (hide, then show), I get some strange problems. If you know the solution to this problem, I would appreciate an email with the explanation.

Stopping Animation

You can also stop an animation that is ongoing, by calling the stop() method on an HTML element, like this:

$('#theDiv').stop();

Stopping an animation might be useful if you are to start a new animation, and you don't want the two animations to run at the same time.

That about sums it up for jQuery effects. By combining these effects you can create your own, more advanced effects. For instance mixtures of sliding and fading etc. Spend some time playing around with the possibilities to get a good feeling for how they work, and what you can use them for in your application. Remember, some effects look nice when you see them the first time, but become tiresome after a while.



Connect with me: Newsletter - Get all my free tips!