In this tutorial, we are going to apply the fading effect on an image element by using jQuery. In the previous tutorial, we have seen the list of jQuery fading methods.
In this example, we are using fading effect on the mouse-over and mouse-out events of the image elements. In this event, the jQuery fadeTo() function is called by passing appropriate image opacity.
This code contains a list of image elements with mouse-over and mouse-out function call.
<img src="fading-photo.png" onMouseOver="fade(this,0.4)"
onMouseOut="fade(this,1)" />
<img src="fading-photo1.png" onMouseOver="fade(this,0.4)"
onMouseOut="fade(this,1)" />
<img src="fading-photo2.png" onMouseOver="fade(this,0.4)"
onMouseOut="fade(this,1)" />
This simple code is used to create hover fading effect on an HTML image element.
function fade(obj, opacity) {
$(obj).stop().fadeTo('slow', opacity);
}