Fade in Fade out using simple jquery function
August 7, 2010 Leave a comment
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>
😀 😀 😛 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
Comments