One of the most important things jQuery can do is animation and controlling
style (CSS) properties of elements. As such, jQuery has the ability to make
elements visible or invisible, that is, control the elements CSS
display properties.
There are four different methods that make it easy to control the display properties of an element:
- hide
- show
- fadeOut
- fadeIn
The demo on the right will be affected whenever the code is run on any of the samples following it.
Display
The jQuery hide method will add the CSS display : none
property and value set to an element.
jQuery("#main_image_display").hide();
The jQuery show method will simply remove the CSS display : none
property and value set from an element.
jQuery("#main_image_display").show();
Fade
The jQuery fadeOut method is slightly more advanced. What this method does is animates
the opacity property of the element from 1 to 0, ensuring it becomes
completely transparent. When it reaches 0, the element is then given the property and value pair
display : none.
The following example delays the effect so that it can be observed above when run, but it does not need to be in any time out as shown below for it to function:
jQuery("#main_image_display").fadeOut();
Much like the fadeOut method, the fadeIn method works
with the opacity property of the element, but it takes
the opacity from 0 to 1 as opposed to taking it from 1 to 0. It also removes the
display : none property and value pair
from the element when the element becomes completely opaque.
As before, to ensure that the effect is observable it is within a timeout.
jQuery("#main_image_display").fadeIn();
Both the fadeOut and fadeIn methods also can take parameters
to change how long they take to complete and what to do after the animation finishes.
The first parameter decides how long the animation should take, whereas the second parameter, which should be a function handle, decides what to do after the animation has finished.
jQuery("#main_image_display").fadeOut(10000, function(){ alert("Fade out complete"); }); jQuery("#main_image_display").fadeIn(10000, function(){ alert("Fade in complete"); });
Write the code that will make the image shown disappear over 10 seconds. Once the image
has disappeared, make it reappear instantly. The image has the ID attribute with a value
theimage.
