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