Simple Hover Fade Effect Using jQuery

In this tutorial we are going to apply fading effect on an image element by using jQuery. In 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.

jquery-hover-fade-effect

View DemoDownload

HTML Image Element with Mouse-Over Mouse-Out Event

This code contains 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)" />

jQuery Hover Fading Effect

This simple code is used to create hover fading effect on an HTML image element.

function fade(obj,opacity) {
$(obj).stop().fadeTo('slow', opacity);
}

View DemoDownload

This jQuery code tutorial was published on November 28, 2014.

↑ Back to Top