Creating a Mouseover Fade Effect with jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/","20101119233349","https://web.archive.org/","web","/_static/", "1290209629"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="googlebot" content="index,archive,follow,noodp"/> <meta name="robots" content="all,index,follow"/> <meta name="msnbot" content="all,index,follow"/> <meta name="description" content="My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a..."/> <meta name="keywords" content="animate,body,Change,Creating,div,document,download,Function,Grab,head tags,Images,img,Javascript,jquery,mouseover,position,possibilities,use,version,WordPress,"/> <title>Creating a Mouseover Fade Effect with jQuery | bavotasan.com</title> <link rel="stylesheet" href="https://web.archive.org/web/20101119233349cs_/http://bavotasan.com/wp-content/themes/bavotasan-2010/style.css?ver=1.0.8" type="text/css" media="screen"/> <link rel="shortcut icon" href="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/favicon.ico"/> <link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Feed" href="https://web.archive.org/web/20101119233349/http://bavotasan.com/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Comments Feed" href="https://web.archive.org/web/20101119233349/http://bavotasan.com/comments/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Creating a Mouseover Fade Effect with jQuery Comments Feed" href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/feed/"/> <script type="text/javascript" src="https://web.archive.org/web/20101119233349js_/http://bavotasan.com/wp-includes/js/jquery/jquery.js?ver=1.4.2"></script> <link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/> <link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/> <link rel="prev" title="How to Use the Important Declaration in CSS" href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/"/> <link rel="next" title="Validate Your Web Designs" href="https://web.archive.org/web/20101119233349/http://bavotasan.com/articles/validate-your-web-designs/"/> <link rel="canonical" href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/"/> <link rel="shortlink" href="https://web.archive.org/web/20101119233349/http://bit.ly/bETRnX"/> <script type="text/javascript" src="https://web.archive.org/web/20101119233349js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:page_id" content="137456822940271"/> <meta property="fb:admins" content="586505548"/> <meta property="og:site_name" content="bavotasan.com"/> <meta property="og:title" content="Creating a Mouseover Fade Effect with jQuery"/> <meta property="og:description" content="My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. To achieve this effect [...]"/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-content/uploads/2009/09/jquerylogo.png"/> </head> <body class="single single-post postid-779"> <div id="bodywrap">  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//web.archive.org/web/20101119233349/http://s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>   <div id="header"> <div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom menu-item-2254"><a href="https://web.archive.org/web/20101119233349/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li> <li id="menu-item-2255" class="menu-item menu-item-type-custom menu-item-2255"><a href="https://web.archive.org/web/20101119233349/http://themes.bavotasan.com/support/">Support Forum</a></li> <li id="menu-item-2259" class="menu-item menu-item-type-custom menu-item-2259"><a href="https://web.archive.org/web/20101119233349/http://themes.bavotasan.com/affiliates">Affiliates</a></li> <li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-2256"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/about/">About</a></li> <li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-2257"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/services/">Services</a></li> <li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-2258"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/contact/">Contact</a></li> </ul></div> <div id="title"> <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/"> <img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-content/themes/bavotasan-2010/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> <span id="desc"></span></a> </div> <div id="follow"> <span></span> <a href="https://web.archive.org/web/20101119233349/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/feed/" class="rss"></a> </div> <div id="navigation" class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2264"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/"><span></span>Home</a></li> <li id="menu-item-2266"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/category/articles/"><span></span>Articles</a></li> <li id="menu-item-2265" class="current-menu-item"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/category/tutorials/"><span></span>Tutorials</a></li> <li id="menu-item-2267"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/category/downloads/"><span></span>Downloads</a></li> </ul> </div> </div>  <div id="mainwrapper"> <div id="leftcontent"> <div class="posttop"> <div class="thedate"><div class="month">Aug</div><div class="day">05</div><div class="year">2009</div></div> <h1>Creating a Mouseover Fade Effect with jQuery</h1> <br class="clear"/> <p>My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. To achieve this effect I am going to introduce the <a href="https://web.archive.org/web/20101119233349/http://docs.jquery.com/Effects/animate">animate function</a>. There are tons of possibilities in regards to jQuery’s animate function, but for this tutorial, I’m going to keep it simple by just using it to do one thing.<br/> <span id="more-779"></span><br/> First things first, download <a href="https://web.archive.org/web/20101119233349/http://jquery.com/">jQuery</a>. Grab the Production minified version off of their site. Next, get two images. I used the following.</p> <p><img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-content/uploads/2009/08/cbavota-bw.jpg" alt="cbavota-bw" title="cbavota-bw" width="150" height="122" class="alignleft size-full wp-image-781"/><img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-content/uploads/2009/08/cbavota.jpg" alt="cbavota" title="cbavota" width="150" height="122" class="alignleft size-full wp-image-782"/></p> <hr style="clear:both;border:0;"/> <p>Add the jQuery script between your head tags.</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;"><</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">'text/javascript'</span> src<span style="color: #339933;">=</span><span style="color: #0000ff;">'http://yoursite.com/jquery.js'</span><span style="color: #339933;">></</span>script<span style="color: #339933;">></span></pre></div></td></tr></table></div> <p>Here is the function.</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;"><</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">'text/javascript'</span><span style="color: #339933;">></span> $<span style="color: #009900;">(</span>document<span style="color: #009900;">)</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">(</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span> $<span style="color: #009900;">(</span><span style="color: #3366CC;">"img.a"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">(</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"opacity"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"0"</span><span style="color: #009900;">}</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">"slow"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"opacity"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"1"</span><span style="color: #009900;">}</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">"slow"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>   <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #339933;"></</span>script<span style="color: #339933;">></span></pre></div></td></tr></table></div> <p>Here is the CSS.</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><style<span style="color: #00AA00;">></span>   div<span style="color: #6666ff;">.fadehover</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span>   img<span style="color: #6666ff;">.a</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">z-index</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">10</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span>   img<span style="color: #6666ff;">.b</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span>   </style<span style="color: #00AA00;">></span></pre></div></td></tr></table></div> <p>And here is the body code.</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;"><</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">"fadehover"</span><span style="color: #339933;">></span> <span style="color: #339933;"><</span>img src<span style="color: #339933;">=</span><span style="color: #0000ff;">"cbavota-bw.jpg"</span> alt<span style="color: #339933;">=</span><span style="color: #0000ff;">""</span> <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">"a"</span> <span style="color: #339933;">/></span> <span style="color: #339933;"><</span>img src<span style="color: #339933;">=</span><span style="color: #0000ff;">"cbavota.jpg"</span> alt<span style="color: #339933;">=</span><span style="color: #0000ff;">""</span> <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">"b"</span> <span style="color: #339933;">/></span> <span style="color: #339933;"></</span>div<span style="color: #339933;">></span></pre></div></td></tr></table></div> <p>All together you got something that looks like this.</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;"><!</span>DOCTYPE html <span style="color: #000000; font-weight: bold;">PUBLIC</span> <span style="color: #0000ff;">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span> <span style="color: #0000ff;">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: #339933;">></span> <span style="color: #339933;"><</span>html xmlns<span style="color: #339933;">=</span><span style="color: #0000ff;">"http://www.w3.org/1999/xhtml"</span><span style="color: #339933;">></span> <span style="color: #339933;"><</span>head<span style="color: #339933;">></span> <span style="color: #339933;"><</span>meta http<span style="color: #339933;">-</span>equiv<span style="color: #339933;">=</span><span style="color: #0000ff;">"Content-Type"</span> content<span style="color: #339933;">=</span><span style="color: #0000ff;">"text/html; charset=UTF-8"</span> <span style="color: #339933;">/></span> <span style="color: #339933;"><</span>title<span style="color: #339933;">></span>jQuery Hover Effect<span style="color: #339933;"></</span>title<span style="color: #339933;">></span> <span style="color: #339933;"><</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">'text/javascript'</span> src<span style="color: #339933;">=</span><span style="color: #0000ff;">'jquery.js'</span><span style="color: #339933;">></</span>script<span style="color: #339933;">></span> <span style="color: #339933;"><</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">'text/javascript'</span><span style="color: #339933;">></span> $<span style="color: #009900;">(</span>document<span style="color: #009900;">)</span><span style="color: #339933;">.</span>ready<span style="color: #009900;">(</span><span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span>   $<span style="color: #009900;">(</span><span style="color: #0000ff;">"img.a"</span><span style="color: #009900;">)</span><span style="color: #339933;">.</span>hover<span style="color: #009900;">(</span> <span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $<span style="color: #009900;">(</span>this<span style="color: #009900;">)</span><span style="color: #339933;">.</span>stop<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">.</span>animate<span style="color: #009900;">(</span><span style="color: #009900;">{</span><span style="color: #0000ff;">"opacity"</span><span style="color: #339933;">:</span> <span style="color: #0000ff;">"0"</span><span style="color: #009900;">}</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">"slow"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #339933;">,</span> <span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $<span style="color: #009900;">(</span>this<span style="color: #009900;">)</span><span style="color: #339933;">.</span>stop<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">.</span>animate<span style="color: #009900;">(</span><span style="color: #009900;">{</span><span style="color: #0000ff;">"opacity"</span><span style="color: #339933;">:</span> <span style="color: #0000ff;">"1"</span><span style="color: #009900;">}</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">"slow"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>   <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;"></script></span> <span style="color: #339933;"><</span>style<span style="color: #339933;">></span> div<span style="color: #339933;">.</span>fadehover <span style="color: #009900;">{</span> position<span style="color: #339933;">:</span> relative<span style="color: #339933;">;</span> <span style="color: #009900;">}</span>   img<span style="color: #339933;">.</span>a <span style="color: #009900;">{</span> position<span style="color: #339933;">:</span> absolute<span style="color: #339933;">;</span> left<span style="color: #339933;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> top<span style="color: #339933;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> z<span style="color: #339933;">-</span>index<span style="color: #339933;">:</span> <span style="color: #cc66cc;">10</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span>   img<span style="color: #339933;">.</span>b <span style="color: #009900;">{</span> position<span style="color: #339933;">:</span> absolute<span style="color: #339933;">;</span> left<span style="color: #339933;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> top<span style="color: #339933;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #339933;"></</span>style<span style="color: #339933;">></span> <span style="color: #339933;"></</span>head<span style="color: #339933;">></span>   <span style="color: #339933;"><</span>body<span style="color: #339933;">></span> <span style="color: #339933;"><</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">"fadehover"</span><span style="color: #339933;">></span> <span style="color: #339933;"><</span>img src<span style="color: #339933;">=</span><span style="color: #0000ff;">"cbavota-bw.jpg"</span> alt<span style="color: #339933;">=</span><span style="color: #0000ff;">""</span> <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">"a"</span> <span style="color: #339933;">/></span> <span style="color: #339933;"><</span>img src<span style="color: #339933;">=</span><span style="color: #0000ff;">"cbavota.jpg"</span> alt<span style="color: #339933;">=</span><span style="color: #0000ff;">""</span> <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">"b"</span> <span style="color: #339933;">/></span> <span style="color: #339933;"></</span>div<span style="color: #339933;">></span> <span style="color: #339933;"></</span>body<span style="color: #339933;">></span> <span style="color: #339933;"></</span>html<span style="color: #339933;">></span></pre></div></td></tr></table></div> <p>Test it out below:</p> <p><script> jQuery(document).ready(function(){ jQuery(".a").hover( function() { jQuery(this).stop().animate({"opacity": "0"}, "slow"); }, function() { jQuery(this).stop().animate({"opacity": "1"}, "slow"); }); }); </script></p> <div class="fadehover"><img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-content/uploads/2009/08/cbavota-bw.jpg" alt="" class="a"/><img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-content/uploads/2009/08/cbavota.jpg" alt="" class="b"/></div> <p>NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.</p> <div class="buttonbox"> </div> </div> <div class="post"> <div class="socialleft">If you liked this, please share it.</div> <ul class="addtoany_list"> <li><a href="https://web.archive.org/web/20101119233349/http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2FbETRnX&counturl=http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" class="twitter-share-button" data-count="vertical" data-via="bavotasan">Tweet</a><script type="text/javascript" src="https://web.archive.org/web/20101119233349js_/http://platform.twitter.com/widgets.js"></script></li> <li><a href="https://web.archive.org/web/20101119233349/http://www.facebook.com/sharer.php?u=http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/&t=Creating a Mouseover Fade Effect with jQuery" title="Click to send this page to Facebook!" target="_blank" rel="nofollow" class="facebook-icon"></a></li> <li><a href="https://web.archive.org/web/20101119233349/http://digg.com/submit?phase=2&url=http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/&title=Creating a Mouseover Fade Effect with jQuery&bodytext=My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. To achieve this effect [...]" title="Digg" rel="nofollow" target="_blank" class="digg-icon"></a></li> <li><a href="https://web.archive.org/web/20101119233349/http://www.delicious.com/save" onclick="window.open('https://web.archive.org/web/20101119233349/http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/')+'&title='+encodeURIComponent('Creating a Mouseover Fade Effect with jQuery'),'delicious', 'toolbar=no,width=550,height=550'); return false;" class="delicious-icon"></a></li> <li><a href="https://web.archive.org/web/20101119233349/http://www.stumbleupon.com/submit?url=http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/&title=Creating a Mouseover Fade Effect with jQuery" title="StumbleUpon" rel="nofollow" target="_blank" class="stumbleupon-icon"></a></li> <li><iframe src="https://web.archive.org/web/20101119233349if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fcreating-a-jquery-mouseover-fade-effect%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li> </ul> </div> <div class="post"> <p class="tags">Tags: <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/animate/" rel="tag">animate</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/body/" rel="tag">body</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/change/" rel="tag">Change</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/creating/" rel="tag">Creating</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/div/" rel="tag">div</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/document/" rel="tag">document</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/download/" rel="tag">download</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/function/" rel="tag">Function</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/grab/" rel="tag">Grab</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/head-tags/" rel="tag">head tags</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/images/" rel="tag">Images</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/img/" rel="tag">img</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/javascript/" rel="tag">Javascript</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/jquery/" rel="tag">jquery</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/mouseover/" rel="tag">mouseover</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/position/" rel="tag">position</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/possibilities/" rel="tag">possibilities</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/use/" rel="tag">use</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/version/" rel="tag">version</a>, <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tag/wordpress/" rel="tag">WordPress</a></p> <p class="tags">Short URL: <a href="https://web.archive.org/web/20101119233349/http://bit.ly/bETRnX" title="Creating a Mouseover Fade Effect with jQuery">http://bit.ly/bETRnX</a></p> </div> <div class="post"> <div id="crp_related"> <h3>Similar Posts</h3> <ul> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/articles/magazine-premium-is-out/" rel="bookmark" title="Permanent Link to Magazine Premium v1.1.5 is Out!">Magazine Premium v1.1.5 is Out!</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/articles/a-new-look-for-themes-by-bavotasan-com/" rel="bookmark" title="Permanent Link to A New Look for Themes by bavotasan.com">A New Look for Themes by bavotasan.com</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/my-first-vanilla-plugin/" rel="bookmark" title="Permanent Link to My First Vanilla Plugin">My First Vanilla Plugin</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/add-a-copyright-notice-to-copied-text/" rel="bookmark" title="Permanent Link to Add a Copyright Notice to Copied Text">Add a Copyright Notice to Copied Text</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/meta-descriptions-wordpress/" rel="bookmark" title="Permanent Link to Meta Descriptions for WordPress">Meta Descriptions for WordPress</a></li> </ul> </div> <a href="https://web.archive.org/web/20101119233349/http://www.netfirms.com/web-hosting/web-hosting-business/?a_aid=4c8bb52b19602&a_bid=8f049e07" target="_top" style="float:right;"><img src="https://web.archive.org/web/20101119233349im_/http://www.webhostrevenue.com/accounts/default1/banners/300x250-us.gif" alt="Netfirms Business Hosting Plan" title="Netfirms Business Hosting Plan" width="250" height="208"/></a><img style="border:0" src="https://web.archive.org/web/20101119233349im_/http://www.webhostrevenue.com/scripts/imp.php?a_aid=4c8bb52b19602&a_bid=8f049e07" width="1" height="1" alt=""/> </div> <div class="post"> <a href="#comment_list"></a> <div id="comments"> <h3 id="comments-title">Discussion <small> 122 Comments</small> </h3> <div class="navigation"> <div class="fl"></div> <div class="fr"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/comment-page-2/#comments">Newer Comments →</a></div> </div> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-3657"> <div id="comment-3657"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/bc78e9eeca4abe2043bb671018d504ef?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">freezie</span> <span class="commentdate"> on August 6, 2009 at 9:26 am</span> </div> <div class="comment-text"> <p>Very cool. Thanks for the tut.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=3657#respond" onclick="return addComment.moveForm("comment-3657", "3657", "respond", "779")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3686"> <div id="comment-3686"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/bc78e9eeca4abe2043bb671018d504ef?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">vestarnoob</span> <span class="commentdate"> on August 6, 2009 at 10:07 pm</span> </div> <div class="comment-text"> <p>I have been using javascript for years and I just find jquery so easy to use. All of its extra features really help make a website more interactive.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=3686#respond" onclick="return addComment.moveForm("comment-3686", "3686", "respond", "779")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-3980"> <div id="comment-3980"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/22c52e8b01092f5982ce37d6d305fb8c?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://baneri.bg/" rel="external " class="url">Banner design guy</a></span> <span class="commentdate"> on August 24, 2009 at 6:58 am</span> </div> <div class="comment-text"> <p>I’m looking for something more simple only for fading background colors… but this is really nice, too <img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> 10x</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=3980#respond" onclick="return addComment.moveForm("comment-3980", "3980", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-5020"> <div id="comment-5020"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/0cf2219824723363c0e85bf9106316f8?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Lee Wilson</span> <span class="commentdate"> on September 27, 2009 at 8:40 am</span> </div> <div class="comment-text"> <p>I too am trying to find out how to fade background colours.</p> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-3996"> <div id="comment-3996"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/80da9d7b3db5670357a3e747d9856c86?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://earn-in-home.info/" rel="external " class="url">Umair</a></span> <span class="commentdate"> on August 24, 2009 at 9:39 pm</span> </div> <div class="comment-text"> <p>Awesome! Its a nice collection in my designing knowledge. jQuery is replacing flash animations slowly!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=3996#respond" onclick="return addComment.moveForm("comment-3996", "3996", "respond", "779")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-4209"> <div id="comment-4209"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/ad8ee1a9fe52687e79ea5b7247f2a1c8?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://pluiepositive.com/" rel="external " class="url">vkline</a></span> <span class="commentdate"> on September 6, 2009 at 8:49 am</span> </div> <div class="comment-text"> <p>Thank you for the post. <img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=4209#respond" onclick="return addComment.moveForm("comment-4209", "4209", "respond", "779")">Reply</a> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-4455"> <div id="comment-4455"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/2d34d76c587973907310be4a6bdd0a5f?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Arash</span> <span class="commentdate"> on September 14, 2009 at 5:12 am</span> </div> <div class="comment-text"> <p>Thank you for your great tutorial. Just 2 points.</p> <p>In your body code you forgot a closing div.<br/> In IE (7 and <img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley"/> the fade effect created a black border around transparent (24bit) png files. Perhaps you can add a small code to make that go away without having to use .gif or a 8bit .png.</p> <p>That would make a great code into an excellent code.</p> <p> <img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=4455#respond" onclick="return addComment.moveForm("comment-4455", "4455", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-4459"> <div id="comment-4459"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://tinkerpriestmedia.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on September 14, 2009 at 6:51 am</span> </div> <div class="comment-text"> <p>Thanks for letting me know. I added the missing div. Let me look into that black border issue.</p> </div> </div> </li> <li class="comment even depth-2" id="li-comment-9490"> <div id="comment-9490"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/ae359ed34dc762d53ec3b8e490139b5c?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">rotagila</span> <span class="commentdate"> on May 19, 2010 at 1:30 pm</span> </div> <div class="comment-text"> <p>You can get rid of the black border issue in IE by setting a background-color of the image. I had those grey borders even on jpgs, setting the background-color worked for me.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-4866"> <div id="comment-4866"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/cf694e37685c893717aff7dbe0c16d2b?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.gayadesign.com/" rel="external " class="url">Gaya</a></span> <span class="commentdate"> on September 23, 2009 at 11:57 am</span> </div> <div class="comment-text"> <p>Nice piece of code.<br/> Try putting “.stop()” before “.animate()” to prevent the animation from getting in a loop.<br/> Again: awesome stuff.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=4866#respond" onclick="return addComment.moveForm("comment-4866", "4866", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-9236"> <div id="comment-9236"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/abc490b753fdb47f43a986d83013d0bd?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://acepek.com/" rel="external " class="url">acepek</a></span> <span class="commentdate"> on May 3, 2010 at 9:23 pm</span> </div> <div class="comment-text"> <p>Good tip. Adding the stop like so:</p> <p>.stop().animate({“opacity”: “0″}, “slow”);</p> <p>keeps the effect from repeating if the mouse passes over it multiple times.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-5049"> <div id="comment-5049"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/4cf069b48042eb55cd622c6f501ae52c?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">manojit</span> <span class="commentdate"> on September 28, 2009 at 8:32 am</span> </div> <div class="comment-text"> <p>hi,</p> <p>i believe you have explained well enough for a person using web language.<br/> well i am merely a motion graphic designer… and i am trying to make my website through wordpress… and i like the idea of doing it myself.. its fairly a simple one..<br/> i have a page where i have icons and links on them which enables a video to play on a shadowbox.(through a plugin)<br/> i now need this effect on mouseover on the icons…<br/> so i need to know where should i need to paste this codes (well to begin with there are plenty of them <img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/><br/> would you please be kind enough to explain it w.r.t wordpress codes. i would be grateful</p> <p>ragards<br/> manojit</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=5049#respond" onclick="return addComment.moveForm("comment-5049", "5049", "respond", "779")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-5281"> <div id="comment-5281"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/b49f9f01bcd093869ae43d1e5d28b664?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">js</span> <span class="commentdate"> on October 6, 2009 at 4:00 pm</span> </div> <div class="comment-text"> <p>This is fabulous! I’ve been trying to figure out a way to animate a before and after effect for multiple images and this works perfectly. Thanks for the great tutorial!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=5281#respond" onclick="return addComment.moveForm("comment-5281", "5281", "respond", "779")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-5346"> <div id="comment-5346"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/9a3d58677b9c6d547beea8f0d821cda4?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.worthyconcepts.com/" rel="external " class="url">Steve</a></span> <span class="commentdate"> on October 9, 2009 at 3:19 pm</span> </div> <div class="comment-text"> <p>GREAT!! This is almost exactly what I need.</p> <p>What I want to do is to have multiple rows and columns of thumbnails that are black and white which fade to color as you mouseover each of them… is there a way to modify the code so that the color image will always be directly under the black and white image without setting the position of the black and white image?</p> <p>Thanks,<br/> Steve</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=5346#respond" onclick="return addComment.moveForm("comment-5346", "5346", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor even depth-2" id="li-comment-5406"> <div id="comment-5406"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://tinkerpriestmedia.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on October 13, 2009 at 12:28 pm</span> </div> <div class="comment-text"> <p>If you want an image to appear below another image you will always have to set the position or else they will appear next to each other.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-5839"> <div id="comment-5839"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/657e72795224dc1b3b145f69ac03d5d9?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.agencja-mojito.pl/" rel="external " class="url">mojitopl</a></span> <span class="commentdate"> on November 1, 2009 at 5:47 pm</span> </div> <div class="comment-text"> <p>Did anyone solved tha god damn IE black border on animated transparent png-s (24bits)!? Thanks a loooooot for any clue.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=5839#respond" onclick="return addComment.moveForm("comment-5839", "5839", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor even depth-2" id="li-comment-5906"> <div id="comment-5906"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on November 4, 2009 at 2:09 pm</span> </div> <div class="comment-text"> <p>There are some solutions I have come across online but I haven’t really tried any out.</p> <p>This one sounds good.</p> <p><a href="https://web.archive.org/web/20101119233349/http://christopherschmitt.com/2007/10/30/png-transparency-for-internet-explorer-ie6-and-beyond/">http://christopherschmitt.com/2007/10/30/png-transparency-for-internet-explorer-ie6-and-beyond/</a></p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-5850"> <div id="comment-5850"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/8655478fe1931a12532a438e4a6d7277?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Neil</span> <span class="commentdate"> on November 2, 2009 at 7:50 am</span> </div> <div class="comment-text"> <p>Hi.<br/> This bit of code is great. I’m attempting to use the fade as a background behind some image and text divs (set to a z-index higher than the fadehover) but every time i roll over the image or text the fade changes back to it’s original state.</p> <p><a href="https://web.archive.org/web/20101119233349/http://www.diluterecordings.com/2009/">http://www.diluterecordings.com/2009/</a></p> <p>Is there a fix for this so that the box stays highlighted while the mouse is over any area of the box?<br/> Thanks,<br/> neil</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=5850#respond" onclick="return addComment.moveForm("comment-5850", "5850", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor even depth-2" id="li-comment-5907"> <div id="comment-5907"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on November 4, 2009 at 2:15 pm</span> </div> <div class="comment-text"> <p>Make sure you have added the .stop() before the .animate() function.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-6105"> <div id="comment-6105"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/10c75351c2135a07acded17990c99c51?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">acid</span> <span class="commentdate"> on November 12, 2009 at 1:45 pm</span> </div> <div class="comment-text"> <p>what if I want to add more colors (same image other color) and make each mouseover show another color in an order (not randomized)? how would that work?</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=6105#respond" onclick="return addComment.moveForm("comment-6105", "6105", "respond", "779")">Reply</a> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-6434"> <div id="comment-6434"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/9ddb13fe45711a3a67987a404da81470?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Harpreet</span> <span class="commentdate"> on November 26, 2009 at 5:46 am</span> </div> <div class="comment-text"> <p>Hi…</p> <p>can i use this jquery mouse over effect with lightbox. I want the same effect and when i click on the image it should open it in lightbox.</p> <p>But it’s not working…please help me asap</p> <p>Thanks in advance</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=6434#respond" onclick="return addComment.moveForm("comment-6434", "6434", "respond", "779")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-6914"> <div id="comment-6914"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/9a0bb6917ad03a35c1bdd82e08b40116?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.rawkidrocks.com/" rel="external " class="url">Rawkid</a></span> <span class="commentdate"> on December 27, 2009 at 1:04 am</span> </div> <div class="comment-text"> <p>Hi and thanks putting up this tutorial!</p> <p>First of all, i’m in no way a webdesigner/coder/programmer. I’m “messing around” with WordPress myself and doing what i can. The “official” site is being developed by a coder as we speak. Till then i wanted to run a WordPress site.</p> <p>Ontopic: I’ve applied your tutorial to my site and actually it worked right away. And being a no-coder as i said, i had a little party but to know minutes later the party was over…<br/> On this page of my site you can see it’s working:<br/> <a href="https://web.archive.org/web/20101119233349/http://www.rawkidrocks.com/props">http://www.rawkidrocks.com/props</a></p> <p>On this page however you can see i’m having some issues:<br/> <a href="https://web.archive.org/web/20101119233349/http://www.rawkidrocks.com/dummy">http://www.rawkidrocks.com/dummy</a></p> <p>As you can see, i’m trying to put several images underneath eachother, but they are overlapping.<br/> I’m guessing it has nothing to do with your css or jquery codes, but i hope you don’t mind asking you anyway. My guess is there’s something wrong with my styling or. So. Could you please have a look at this? I really hope you can help me out here.</p> <p>Regards,</p> <p>Johnny</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=6914#respond" onclick="return addComment.moveForm("comment-6914", "6914", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor even depth-2" id="li-comment-6921"> <div id="comment-6921"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on December 28, 2009 at 10:42 am</span> </div> <div class="comment-text"> <p>I would suggest settings the width and the height in your CSS so that each fadehover div does not overlap the other.</p> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-6923"> <div id="comment-6923"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/9a0bb6917ad03a35c1bdd82e08b40116?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.rawkidrocks.com/" rel="external " class="url">Rawkid</a></span> <span class="commentdate"> on December 28, 2009 at 12:33 pm</span> </div> <div class="comment-text"> <p>Thanks! I feel so stupid, knowing now it was something that “simple”. But then again, i don’t know anything about coding. Thanks again and keep up the great job!</p> <p>Johnny</p> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-7023"> <div id="comment-7023"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/a6dae065dff4826070725112a72884b9?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">srk289</span> <span class="commentdate"> on January 8, 2010 at 2:51 am</span> </div> <div class="comment-text"> <p>Hi I tried different fixes for the IE black border issue but it didnt work.. Could you please post your possible solution</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=7023#respond" onclick="return addComment.moveForm("comment-7023", "7023", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-7062"> <div id="comment-7062"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on January 11, 2010 at 11:26 am</span> </div> <div class="comment-text"> <p>There are some solutions in this post that seem to work.</p> <p><a href="https://web.archive.org/web/20101119233349/http://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem">http://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem</a></p> <p>Have you tried any of them?</p> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-7430"> <div id="comment-7430"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/a7555dd00e87b6376c945a679ff675b7?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Rodger</span> <span class="commentdate"> on January 31, 2010 at 7:04 am</span> </div> <div class="comment-text"> <p>I encountered a problem with your code, if I move the mouse over and away from the element repeatedly and quickly it will continue blinking for about 10secs to come after you have stopped moving the mouse. is there a fix for this?</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=7430#respond" onclick="return addComment.moveForm("comment-7430", "7430", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-7434"> <div id="comment-7434"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on January 31, 2010 at 9:26 am</span> </div> <div class="comment-text"> <p>It wasn’t with the code, it was with the demo. I just forgot to update the demo code with <code>.stop()</code>.</p> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-7677"> <div id="comment-7677"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/d8bf74f82fdfff7ffb1a9d733b9c232d?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.iamkreative.co.uk/" rel="external " class="url">kevin lofthouse</a></span> <span class="commentdate"> on February 12, 2010 at 6:36 pm</span> </div> <div class="comment-text"> <p>nice, I produced a similar effect with fadeTo, placing one image on top of another with absolute positioning. Yours seems alot easier then mine. good work <img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> <p><a href="https://web.archive.org/web/20101119233349/http://www.iamkreative.co.uk/blog/design/fading-image-switch-jquery/">http://www.iamkreative.co.uk/blog/design/fading-image-switch-jquery/</a></p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=7677#respond" onclick="return addComment.moveForm("comment-7677", "7677", "respond", "779")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-7729"> <div id="comment-7729"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/11413da3298b5db2a48351a06661289f?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.051495-source.co.cc/" rel="external " class="url">Medi (051495)</a></span> <span class="commentdate"> on February 15, 2010 at 9:35 pm</span> </div> <div class="comment-text"> <p>THANK YOU!!!!!!!! You’ve helped me so!!! lol</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=7729#respond" onclick="return addComment.moveForm("comment-7729", "7729", "respond", "779")">Reply</a> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-7805"> <div id="comment-7805"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/12bee84a6ded5ccc314d4f242260f64f?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Harry</span> <span class="commentdate"> on February 20, 2010 at 5:24 pm</span> </div> <div class="comment-text"> <p>Hi, excellent and simple script.</p> <p>Had no problem using your example here to fade between pictures, but am having trouble adding a delay before the fade out. Is there a way of doing this?</p> <p>I understand that jquery 1.4+ has a delay function, but I can’t figure out how to integrate it here. </p> <p>Thanks again for the code <img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=7805#respond" onclick="return addComment.moveForm("comment-7805", "7805", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-7845"> <div id="comment-7845"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on February 22, 2010 at 1:59 pm</span> </div> <div class="comment-text"> <p>I still haven’t played around with 1.4 but as soon as I do I will let you know.</p> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-7961"> <div id="comment-7961"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/35ae8b7491d25187b593a652d190c044?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.avantgande.com/eyedr18" rel="external " class="url">Maximilian</a></span> <span class="commentdate"> on February 28, 2010 at 11:30 am</span> </div> <div class="comment-text"> <p>Hey and thank you very much for this script, it is really awesome!<br/> I have a problem and a question though, I’m building my new website and look what happens: <a href="https://web.archive.org/web/20101119233349/http://www.avantgande.com/eyedr18/">http://www.avantgande.com/eyedr18/</a> I have tried to make this work with one image so far as a test (the girl with the dark hair with the read more tag) and while the fading part works great, the image is suddenly not at the right place anymore, and I really can’t tell what went wrong, my code looks clean..</p> <p>Also, I have lost Lightbox functionality here, is that possible?</p> <p>Thanks!<br/> Mx</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=7961#respond" onclick="return addComment.moveForm("comment-7961", "7961", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-7964"> <div id="comment-7964"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/35ae8b7491d25187b593a652d190c044?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.avantgande.com/eyedr18" rel="external " class="url">Maximilian</a></span> <span class="commentdate"> on February 28, 2010 at 1:07 pm</span> </div> <div class="comment-text"> <p>Okay, in some weird way I managed to fix the first problem.. Now how about Lightbox integration? <img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> <p> <a href="images/image-1.jpg"></p> <p> </a><br/> </div</p> <p>this is how my code looks like now, but obviously no result..</p> </div> </div> </li> <li class="comment even depth-2" id="li-comment-7965"> <div id="comment-7965"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/35ae8b7491d25187b593a652d190c044?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.avantgande.com/eyedr18" rel="external " class="url">Maximilian</a></span> <span class="commentdate"> on February 28, 2010 at 1:32 pm</span> </div> <div class="comment-text"> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;">  <span style="color: #339933;"><</span>a href<span style="color: #339933;">=</span><span style="color: #0000ff;">"images/image-1.jpg"</span><span style="color: #339933;">></span>     <span style="color: #339933;"></</span>a<span style="color: #339933;">></span></pre></div></td></tr></table></div> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-7966"> <div id="comment-7966"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/35ae8b7491d25187b593a652d190c044?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.avantgande.com/eyedr18" rel="external " class="url">Maximilian</a></span> <span class="commentdate"> on February 28, 2010 at 1:32 pm</span> </div> <div class="comment-text"> <p>Okay the code is not showing up nicely at all.. <img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> </div> </div> </li> <li class="comment byuser bypostauthor even depth-2" id="li-comment-7979"> <div id="comment-7979"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on March 1, 2010 at 2:02 pm</span> </div> <div class="comment-text"> <p>Paste your code between <pre> tags like indicated in the instructions below.</p> <p>But I am not too familiar with Lightbox so I don’t know if I can help you out.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-7963"> <div id="comment-7963"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/3ac1692380fa61e28f48920cb9a068e1?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">danie ocean</span> <span class="commentdate"> on February 28, 2010 at 12:53 pm</span> </div> <div class="comment-text"> <p>Can you do above example without absolute position tag?</p> <p>The site elements get misplaced while switching between bigger and smaller screens.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=7963#respond" onclick="return addComment.moveForm("comment-7963", "7963", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor even depth-2" id="li-comment-7978"> <div id="comment-7978"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on March 1, 2010 at 2:01 pm</span> </div> <div class="comment-text"> <p>You can’t do it without absolute positions because the elements need to sit on top of one another.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-8000"> <div id="comment-8000"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/35ae8b7491d25187b593a652d190c044?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.avantgande.com/eyedr18" rel="external " class="url">Maximilian</a></span> <span class="commentdate"> on March 2, 2010 at 2:36 pm</span> </div> <div class="comment-text"> <p>Hey I tried that but clearly it did not work.</p> <p>But here is where I am now: <a href="https://web.archive.org/web/20101119233349/http://www.avantgande.com/eyedr18/">http://www.avantgande.com/eyedr18/</a><br/> The buttons underneath the first Flash banner are finally positioned in the right place, but at the very bottom of the screen is another line of thumbnail-buttons, that are now up too high (they should be on the black bar underneath).. But whenever I try to change a series of buttons, the other line also shifts because of that absolute tag I believe.. Anything I can do about this?</p> <p>Mx</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=8000#respond" onclick="return addComment.moveForm("comment-8000", "8000", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-8019"> <div id="comment-8019"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/35ae8b7491d25187b593a652d190c044?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.avantgande.com/eyedr18" rel="external " class="url">Maximilian</a></span> <span class="commentdate"> on March 3, 2010 at 7:19 am</span> </div> <div class="comment-text"> <p>Ok I was able to solve my problem, just worked with more relative tags and now everything is fixed, except the Lightbox problem. Here goes my code again, trying with pre tags:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"> <span style="color: #339933;"><</span>a href<span style="color: #339933;">=</span><span style="color: #0000ff;">"images/image-1.jpg"</span><span style="color: #339933;">></span>     <span style="color: #339933;"></</span>a<span style="color: #339933;">></span></pre></div></td></tr></table></div> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-8020"> <div id="comment-8020"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/35ae8b7491d25187b593a652d190c044?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.avantgande.com/eyedr18" rel="external " class="url">Maximilian</a></span> <span class="commentdate"> on March 3, 2010 at 7:20 am</span> </div> <div class="comment-text"> <p>Damn it, same result and used the pre-tags. You can check it in my source code if you want to, it’s plain html.</p> <p>Mx</p> </div> </div> </li> <li class="comment byuser bypostauthor even depth-2" id="li-comment-8026"> <div id="comment-8026"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on March 3, 2010 at 10:33 am</span> </div> <div class="comment-text"> <p>It seems to be fine. I guess you figured it out.</p> <p>Just to let you know, you can use this for your jQuery instead of what you have:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">(</span><span style="color: #3366CC;">"img.a, img.c, img.e"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">(</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"opacity"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"0"</span><span style="color: #009900;">}</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">"slow"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"opacity"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"1"</span><span style="color: #009900;">}</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">"slow"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></div></td></tr></table></div> <p>Cuts down on the code and works the same.</p> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-8049"> <div id="comment-8049"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/35ae8b7491d25187b593a652d190c044?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.avantgande.com/eyedr18" rel="external " class="url">Maximilian</a></span> <span class="commentdate"> on March 4, 2010 at 5:07 pm</span> </div> <div class="comment-text"> <p>Thanks! I did figure it out. <img src="https://web.archive.org/web/20101119233349im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> Thanks for the tip on how to shorten it.</p> <p>Do you have any idea on how to get the lightbox feature back up?</p> </div> </div> </li> <li class="comment byuser bypostauthor even depth-2" id="li-comment-8085"> <div id="comment-8085"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on March 6, 2010 at 10:55 am</span> </div> <div class="comment-text"> <p>I don’t really use Lightbox so I am not too clear on what the problem might be.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-8018"> <div id="comment-8018"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/d59e5f1b5ea51a7333c0e3f6151ebda7?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://blamethesky.com/" rel="external " class="url">hugo</a></span> <span class="commentdate"> on March 3, 2010 at 4:48 am</span> </div> <div class="comment-text"> <p>hey.<br/> you are full of helpful tips and tricks. alas i require additional help. after much fighting i finally got the fade to work. problem is that it only fades to the different image once and then leaves it there. as you can see:<br/> <a href="https://web.archive.org/web/20101119233349/http://www.blamethesky.com/site2.html">http://www.blamethesky.com/site2.html</a></p> <p>assistance would be super.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=8018#respond" onclick="return addComment.moveForm("comment-8018", "8018", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-8055"> <div id="comment-8055"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://1.gravatar.com/avatar/35ae8b7491d25187b593a652d190c044?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.avantgande.com/eyedr18" rel="external " class="url">Maximilian</a></span> <span class="commentdate"> on March 4, 2010 at 9:17 pm</span> </div> <div class="comment-text"> <p>Sure you copied the code completely right? Changed the jquery?</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-8073"> <div id="comment-8073"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/ab57f8a0a3b12d884298fa1b0134a7da?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.espejodeagua.com.ar/" rel="external " class="url">Lau</a></span> <span class="commentdate"> on March 5, 2010 at 4:43 pm</span> </div> <div class="comment-text"> <p>This is just what I was looking for, and it’s really easy! Thank you for sharing!<br/> But i’m stucked with a little problem: could it be that it doesn’t work inside a php include? I run it separately and works just fine, but when I separate everything to fit the modules it just won’t make the fade effect.<br/> I checked and triple checked everything, and all seems to be correct.<br/> Did this happen to anyone else?</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/?replytocom=8073#respond" onclick="return addComment.moveForm("comment-8073", "8073", "respond", "779")">Reply</a> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-8074"> <div id="comment-8074"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101119233349im_/http://0.gravatar.com/avatar/ab57f8a0a3b12d884298fa1b0134a7da?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101119233349/http://www.espejodeagua.com.ar/" rel="external " class="url">Lau</a></span> <span class="commentdate"> on March 5, 2010 at 5:23 pm</span> </div> <div class="comment-text"> <p>Never mind, already fixed it. I had to call Jquery again, it was so stupid 卢篓_卢篓<br/> Thank you for the amazing tutorial!</p> </div> </div> </li> </ul> </li> </ol> <div class="navigation"> <div class="fl"></div> <div class="fr"><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/comment-page-2/#comments">Newer Comments →</a></div> </div> <a name="respond"></a> <div id="respond"> <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="https://web.archive.org/web/20101119233349/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"> <p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p> <p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><br/><input id="author" name="author" type="text" value="" size="30"/></p> <p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><br/><input id="email" name="email" type="text" value="" size="30"/></p> <p class="comment-form-url"><label for="url">Website</label><br/><input id="url" name="url" type="text" value="" size="30"/></p> <p>To enter code in the comment box, please place it between <strong><pre lang="php"> </pre></strong> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.</p> <p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="779" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/> </p> </form> </div> </div> </div> </div>  <div id="sidebar"> <div id="search"> <form method="get" id="searchform" action="https://web.archive.org/web/20101119233349/http://bavotasan.com/"> <div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/> </div> </form> <div class="arrow"></div> </div> <div id="sideads">  <div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  <br class="clear"/>  <div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <br class="clear"/> <div class="line"></div> <div class="side-widget"> <h4>Most Popular Posts</h4> <ul class="wppp_list"> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/articles/magazine-premium-is-out/" title="Magazine Premium v1.1.5 is Out!">Magazine Premium v1.1.5 is Out!</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/php-code-to-redirect-mobilehandheld-users/" title="PHP Code to Redirect Mobile/Handheld Users">PHP Code to Redirect Mobile/Handheld Users</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/6-free-vinyl-record-vectors/" title="6 Free Vinyl Record Vectors">6 Free Vinyl Record Vectors</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/adding-extra-fields-to-the-wordpress-user-profile/" title="Adding Extra Fields to the WordPress User Profile">Adding Extra Fields to the WordPress User Profile</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/limiting-the-number-of-words-in-your-excerpt-or-content-in-wordpress/" title="Excerpt or Content Word Limit in WordPress: Redux">Excerpt or Content Word Limit in WordPress: Redux</a></li> </ul> </div> <div id="affiliates-ads"> <a href="https://web.archive.org/web/20101119233349/http://themes.bavotasan.com/" class="themes"></a> <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" class="deletedupes"></a> <a href="https://web.archive.org/web/20101119233349/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7" class="inmotion"></a> </div> <div class="line"></div> <div class="side-widget redlink"> <h4>Get a Premium Theme for FREE</h4> <p><a href="https://web.archive.org/web/20101119233349/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20101119233349/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for <em>FREE</em>? All you need to do is <a href="https://web.archive.org/web/20101119233349/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <br/> <br/> <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/free-premium-theme/" class="fr"><em>Click here for more information »</em></a> </p> </div> <div class="side-widget"> <h4>Support c.bavota</h4> <p>If you would like to support <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know).</p> <a href="https://web.archive.org/web/20101119233349/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a> </div> </div> </div> </div>  <div class="whiteline"></div> <div id="footer"> <div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top<span></span></a> <div class="col col1"> <h4 class="one"><span></span>Stay in Touch</h4> <a href="https://web.archive.org/web/20101119233349/http://twitter.com/bavotasan" class="footer-twitter"><span></span>Follow me on Twitter</a><br/> <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/feed/" class="footer-rss"><span></span>Subscribe to my RSS Feed</a> <br class="clear"/> <h4 class="two"><span></span>Stay in Tune</h4> <div class="tweets"></div> </div> <div class="col col2"> <h4 class="three"><span></span>Downloads</h4> <ul> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/my-first-vanilla-plugin/">My First Vanilla Plugin</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind v1.1.2 Free WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li> </ul> </div> <div class="col col3"> <h4 class="four"><span></span>Tutorials</h4> <ul> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/add-a-copyright-notice-to-copied-text/">Add a Copyright Notice to Copied Text</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/meta-descriptions-wordpress/">Meta Descriptions for WordPress</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/turning-on-php-errors/">Turning On PHP Errors</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/using-css-resets/">Using CSS Resets</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/">A Sleek Navigation Menu with CSS3</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/">A Basic jQuery Slideshow</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/text-rotation-css3/">Text Rotation with CSS3</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/adding-tweet-button-wordpress/">Adding a Tweet Button to WordPress</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/developing-themes-for-wordpress-make-money/">Developing Themes for WordPress: Part 5</a></li> <li><a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/tutorials/developing-themes-for-wordpress-options/">Developing Themes for WordPress: Part 4</a></li> </ul> </div> </div> </div> <div id="copyright"> <div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20101119233349/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20101119233349/http://www.wordpress.org/">WordPress</a>. </div> </div> <script src="https://web.archive.org/web/20101119233349js_/http://stats.wordpress.com/e-201046.js" type="text/javascript"></script> <script type="text/javascript"> st_go({blog:'5317602',v:'ext',post:'779'}); var load_cmc = function(){linktracker_init(5317602,779,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <script type="text/javascript" src="https://web.archive.org/web/20101119233349js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript"> hs.graphicsDir = 'https://web.archive.org/web/20101119233349/http://bavotasan.com/images/graphics/'; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; hs.showCredits = false; </script>  </body> </html>

CINXE.COM

Creating a Mouseover Fade Effect with jQuery | bavotasan.com