Fade an Image into Another Using jQuery

Posted on - Last Modified on

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.

.animate(css properties ,[time duration],[easing function],[on complete])

cssproperties - This parameter represents the CSS properties and their respective values that the selector object will move towards on animation.

timeduration - This mentions the number of milliseconds or a string which represents the time of animation.

easingfunction - Represents the easing function to be used for the animation.

oncomplete - The function to be performed when the animation completes is mentioned here.

Now we can see on how these  functions are used in the following examples.

Example 1 :

In this example we keep one image hidden as the background image and we animate with jquery‘animate’ function to fade in the overlapped front image on hover operation. 

<div id="fadeimg" style="background-image: url('images/image1.jpg'); height: 200px; width: 300px;">

<imgsrc="images/image2.jpg" alt="fade operation" style="opacity: 1;">

</div>

Place this code in your html document and place the two images in the images folder.

Now include the jquery segment below to perform the animate operation.

$(document).ready(function() {

    $("#fadeimg").hover(function(){

        $("#fadeimgimg").animate({ opacity: 0 }, 'slow');

    }, function() {

        $("#fadeimgimg").animate({ opacity: 1 }, 'slow');

    });

});

When you open the HTML file in your browser, you'll see that on hovering when there is a mouse in action this segment of code is invoked:

$("#fadeimgimg").animate({ opacity: 0 }, 'slow');

And so the second image gets fadein to opacity level 0 and the background image gets displayed to the user on the front end.

pic1.png

When there is mouse out from the image this segment of code is invoked.

$("#fadeimgimg").animate({ opacity: 1 }, 'slow');

By which image1 on the background gets overlapped slowly by the original front image by bringing its opacity level from 0 to level 1.

pic2.png

That's it, you've done the fade operation using the animate jquery function.

Example 2:

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.

$(document).ready(function(){

functioncycleFadeImages(){

var $activeimg = $('#cycleimage .active');

var $nextimg = ($activeimg.next().length > 0) ? $activeimg.next() : $('#cycleimageimg:first');

$nextimg.css('z-index',2);

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

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

 });

}

setInterval('cycleFadeImages()', 5000);

 });

Now you can see how this code works.

The function cycleFadeImages() performs the cyclic fade operation

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');

var $activeimg = $('#cycleimage .active');

var $nextimg = ($activeimg.next().length > 0) ? $activeimg.next() : $('# 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. 

Posted 5 December, 2014

Rajhees

DN INFOWAY - WEB DESIGN AND DEVELOPMENT EXPERTS

************ TOP 5 WOMEN FREELANCERS *********************** https://www.freelancer.com/community/articles/women-s-day-special-5-freelancers-who-found-success About ME ************* DN Infoway is an offshore outsourcing company providing round-the-clock services to customers. We are a small team of 10 people, 7 coders and 3 designers. We offer round the clock services in web design and developmen...

Next Article

How To Sell Your Skills