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" />
<title>jQuery</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("img.img1").hover( function() {
$(this).stop().animate({"opacity": "0"}, "slow"); },
function() {
$(this).stop().animate({"opacity": "1"}, "slow"); }); });
</script>
<style> div.fade { position: relative; }
img.img1 { position: absolute; left: 0; top: 0; z-index: 10; }
img.img2 { position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
	<div class="fade">
	<img src="img1.jpg" alt="" class="img1"/>
	<img src="img2.jpg" alt="" class="img2"/>
	</div>
 </body>
 </html>

:D :D :P hope you enjoyed this post.
Thanks,
Nikhil
(WE:B DeSigNer)
Mumbai,IN

Nikhil on Deviant Art
http://designikx.deviantart.com
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
http://twitter.com/designikx

About these ads

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 260 other followers

%d bloggers like this: