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

%d bloggers like this: