Part 4.1jQuery element display

Course
overview

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 their CSS display properties.

There are four different methods that make it easy to control the display properties of an element:

hide
show
fadeOut
fadeIn

This demo will be affected whenever the code is run on any of the samples following it. As well as this, each of the code samples has a setTimeout function that delays any effects so they can be previewed.

Display

The jQuery hide method will add the CSS display : none property and value set to an element.

JavaScript

jQuery("#main_image_display").hide();

The jQuery show method will simply remove the CSS display : none property and value set from an element.

JavaScript

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:

JavaScript

setTimeout(function(){
  jQuery("#main_image_display").fadeOut();
}, 4000);

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.

JavaScript

setTimeout(function(){
  jQuery("#main_image_display").fadeIn();
}, 4000);

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.

JavaScript

setTimeout(function(){
  jQuery("#main_image_display").fadeOut(10000, function(){
    alert("Fade out complete");
  });
  jQuery("#main_image_display").fadeIn(10000, function(){
    alert("Fade in complete");
  });
}, 4000);

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.

Your code