Fade an Image into Another Using jQuery

jQuery is a form of Javascript coding with a simplified syntax and provides many advanced built-in functions for faster coding and implementation of script functionalities. In this article you will learn how to use the jQuery built-in functions to perform a fade operation from one image to another.

jQueryFunctions:

animate()

fadeIn()

fadeOut()

These are the basic jQuery functions that you will use to perform the fade operation over the image to get the view of the second image.

Syntax :

.fadeIn([time duration],[on complete])

timeduration - This mentions the time for how long the animation should take to complete its operation. This parameter has a datatype of number in milliseconds or a string.

oncomplete - This defines the function to be invoked once the animation operation is completed.

Both of the above mentioned parameters are optional parameters and take values based on output requirement.

.fadeOut([time duration],[on complete])

duration - This mentions the time for how long the animation should take to complete its operation. This parameter has a datatype of number in milliseconds or a string.

oncomplete - This defines the function to be invoked once the animation operation gets completed.

Both the above mentioned parameters are optional parameters and take values based on output requirement.

In this example, you'll display a slideshow of images by repeated cyclic display using the fadeIn and fadeOut function.

Place the code section below in the HTML document.

<div id="cycleimage">

<img class="active" src="image1.jpg" alt="image1" />

<imgsrc="image2.jpg" alt="image2" />

<imgsrc="image3.jpg" alt="image3" />

<imgsrc="image4.jpg" alt=”image4" />

</div>

CSS properties is used over the images using the z-index property to make the overlapping of images in the same position, so you should place this code either in the included stylesheet or in the head section of the document.

#cycleimage{position:relative;}

#cycleimageimg{position:absolute;z-index:1}

#cycleimageimg.active{z-index:3}

Now if you look at the HTML file in your browser, you will observe that the active element (ex: image1.jpg) in the front end and other images lie behind as they have less z-index value comparatively.

Now you should include the jquery segment for the fadein and fadeout operations to display the images.Place this in the script section of the html file.

You use this segment of code to get the currently active image shown and from which you can calculate the next image to be shown using the .next() function. Once you reach the last image, cycle the functionality by looping back to the first image : $('# cycleimageimg:first');

After finding the two images we do the fadeout operation on the active image with this code snippet

$activeimg.fadeOut(1500,function(){

$activeimg.css('z-index',1).show().removeClass('active');

$nextimg.css('z-index',3).addClass('active');

});

Where you hange the z-index of the current active image to be one and remove the class ‘active’ from that object, assign this class ‘active’ to the $nextimg and make its css with a higher z-index value for visibility. All these fadeout operations happen in 1.5 sec and this function is called repeatedly using this code section for every 5 seconds:

setInterval('cycleFadeImages()', 5000);

Thus you have used the fadeout function to perform the fade operation from one image to another image.

Similarly you can also use the fadeIn function to perform the fade from one image to another. The difference will be on how the animation appears in the front end.

DN Infoway is an offshore outsourcing company providing round-the-clock services to customers. We are a small team of ten people seven coders and three designers. We offer round the clock services in web design and development. Client satisfaction is the key to the success of DN Infoway.
Our key skills include:
- Wordpress
- Opencart
- Magento
- Drupal
- Joomla
- Parallax responsive websites
- ...