Fade in Fade out using simple jquery function

In this post we will work on fade in/out effect using jquery.
Here we are using an example, in which on hover of one image fade out and
another one fade in. Please check out the following code…

<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'>
<script type='text/javascript'>
$("img.img1").hover( function() {
$(this).stop().animate({"opacity": "0"}, "slow"); },
function() {
$(this).stop().animate({"opacity": "1"}, "slow"); }); });
<style> div.fade { position: relative; }
img.img1 { position: absolute; left: 0; top: 0; z-index: 10; }
img.img2 { position: absolute; left: 0; top: 0; }
	<div class="fade">
	<img src="img1.jpg" alt="" class="img1"/>
	<img src="img2.jpg" alt="" class="img2"/>

😀 😀 😛 hope you enjoyed this post.
(WE:B DeSigNer)

Nikhil on Deviant Art
Art – community of artists and those devoted to art. Digital art, skin art, themes, wallpaper art, traditional art, photography, poetry / prose. Art prints.

Nikhil on Twitter


About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: