Fade in/out js mouseover event
<p>I am looking to implement a mouseover event on my page for a menu - </p>

<p>I have 3 titles to the left with a respective content div on the right where the related text appears.</p>

<p>Having trauled all the forums for a working js solution, I have settled with:</p>

<p><a href="http://flowplayer.org/tools/demos/tabs/mouseover.html" rel="nofollow">http://flowplayer.org/tools/demos/tabs/mouseover.html</a></p>

<p>which uses a very simple js function:</p>

<pre><code>$("#products").tabs("div.description", {event:'mouseover'});
</code></pre>

<p>What I am hoping to do however, is to incorporate a fadeIn(), fadeOut effect so that when the user hovers over a title on the left of the page, the existing content showing fades away and the repective content will fade in to view......</p>

<p>The html coding is:</p>

<pre><code>&lt;div id="products" &gt;

&lt;img src="home.png" alt="home" /&gt;

&lt;img src="services.png" alt="services" /&gt; 

&lt;img src="contact.png" alt="contact" /&gt; 

&lt;/div&gt;

&lt;div class="description" id="home" &gt;
 .. content .. 
&lt;/div&gt;

&lt;div class="description" id="services" &gt;
 .. content .. 
&lt;/div&gt;

&lt;div class="description" id="contact" &gt;
 .. content .. 
&lt;/div&gt;
</code></pre>

<p>I have tried to incorporate thread 5404775 on this site but simply cannot get it working!</p>

<p>Any help much appreciated</p>
