Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

Part 4.1jQuery element display

Part 4.1jQuery element display

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

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
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.

JavaScript
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.

JavaScript
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.

Petro
Feedback 👍
Comments are sent via email to me.