Transparency effects in jQuery

Transparency effects allow us to smoothly change the transparency of an element, hide it or show it. Transparency effects are implemented using the fadeOut(), fadeIn(), fadeTo() and methods fadeToggle().

Method	Description
fadeOut	Hides an element by reducing its transparency
fadeIn	Renders an element by increasing its transparency
fadeToggle	Combines the fadeOut and fadeIn methods: if the transparency is zero, then the element is rendered. If the element is not transparent, then it is hidden.
fadeTo	Changing the transparency to the specified level

fadeOut() The , fadeIn()and methods fadeToggle()have similar uses:

fadeOut/fadeIn/fadeToggle(): method without parameters

fadeOut/fadeIn/fadeToggle([duration] [, easing][, complete]). The parameter duration specifies how long the change in the transparency of the element will last. Its default value is 400 milliseconds.

A parameter easing that accepts the name of the animation easing function as a string. Its default value is “swing”. You can also use the ‘slow’ and values ‘fast’, which correspond to the effect duration of 600 and 200 milliseconds.

The parameter complete represents the callback function that the method will call when the animation completes.

The method fadeTo, unlike other methods, also accepts the opacity parameter – it takes the value to which the element’s transparency should be changed: fadeTo(duration, opacity [, easing][, complete]). The opacity value is a value between 0 (fully transparent) and 1 (fully visible).

Let’s say we have an image on the page and two buttons that will change the transparency of this image:

<img src="ars.jpg" id="ars" /><br>
<button id="fadeIn">FadeIn</button>
<button id="fadeOut">Hide</button>
<script type="text/javascript">
$(function() {
    $('#ars').fadeTo(2000,0.6);
    $('#fadeIn').click(function(){
         $('#ars').fadeIn('slow', function(){alert('Displayed');});
    });
    $('#fadeOut').click(function(){
         $('#ars').fadeOut(2000, function(){alert('Hidden');});
    });
});
</script>

Please note that the fadeIn method increases the transparency to the value that it was before using the fadeOut method, and not necessarily to 1. That is, in this case, since the fadeTo method was applied at the beginning and the transparency was changed to 0.6, the fadeIn method will also increase transparency up to 0.6.