Fade in/out js mouseover event


I am looking to implement a mouseover event on my page for a menu -

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

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

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

which uses a very simple js function:

$("#products").tabs("div.description", {event:'mouseover'});

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......

The html coding is:

<div id="products" > <img src="home.png" alt="home" /> <img src="services.png" alt="services" /> <img src="contact.png" alt="contact" /> </div> <div class="description" id="home" > .. content .. </div> <div class="description" id="services" > .. content .. </div> <div class="description" id="contact" > .. content .. </div>

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

Any help much appreciated


I'm working off the assumption that you want people hovering over the image buttons here to make the corresponding divs fade in and out. What they are doing on that site will not work because Javascript is needed for the fading effect. JQuery makes this easy. I recommend trying something like

<script type="text/javascript"> oldSelected = "home" $(document).ready(function(){ $("#products img").mouseover(function(){ $(".description").stop(true, true); var newSelected = $(this).attr("alt"); $("#" + oldSelected).fadeOut('normal',function(){ $("#" + newSelected).fadeIn(); }); oldSelected = newSelected }); }); </script>

I have tested this and it works. One thing you will want to make sure of is that the css for the divs has them set to not be visible at the start, unless you want one of them visible in which case the id for that div should be what you set the oldSelected to at the start of the function.



The below can be seen on <a href="http://jsfiddle.net/4hc9Z/8/" rel="nofollow">jsfiddle</a>.

You can fade them in and out on mouseover like this

var _current = "home"; // default state $('#products img').mouseover(function (){ // The one we want to show now var id= $(this).attr('alt'); // We don't need to do anything if it's the same one that's already // there if (_current !== id){ $('#' + _current).fadeOut(function(){ // Fade in the new one after the old fades out $('#' + id).fadeIn(); // Update state _current = id; }); } });

I also added some thing to make sure that only the one you want displayed first is displayed when the page loads. I'm assuming it would be the home div.

Add this to the CSS

.hidden{ display:none; }

and put that class on the other divs.

<div class="description hidden" id="services" > .. services.. </div> <div class="description hidden" id="contact" > .. contact .. </div>


This might work:

$("img", "#products").hover(function() { var id = $(this).attr("alt"); $("#" + id).fadeIn("slow"); }, function() { var id = $(this).attr("alt"); $("#" + id).fadeOut("slow"); });


Another idea (without Jquery): you could use CSS opacity:x property (for firefox) or filter:alpha(opacity=x) (for IE) to change the opacity of an element. Fade in/out can be obtained with a small slowed-down cycle.

See also:

<a href="http://www.w3schools.com/css/css_image_transparency.asp" rel="nofollow">http://www.w3schools.com/css/css_image_transparency.asp</a>


  • autocomplete options causes dropdown login box to vanish
  • How To Code A Dropdown Menu Within A Dropdown Menu Option?
  • SWT on Mac OS X: Change dock program name
  • Store background-color when hover a table row in jQuery
  • Open page from bookmarklet, but, make it like a modal window?
  • Colour Saturation/Desat in jQuery
  • Simulate Holding Ctrl Key
  • Radio button show hover between two radio button using jquery
  • I have a modal that opens a second modal and cannot close the first modal if open then close the sec
  • jQueryUI dialog replacement for confirm?
  • Basic defensive programming [duplicate]
  • div fade-in when window is scrolled a certain distance from the top
  • TFS - how do I sum child task hours to parent
  • How to make R's read_csv2() recognise the text characters properly
  • Menu Color Fade on Hover with Jquery
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • Cannot Parse HTML Data Using Android / JSOUP
  • How to get icons for entities from eclipse?
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Getting Messege Twice Using IMvxMessenger
  • How to stop GridView from loading again when I press back button?
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4
  • JaxB to read class hierarchy
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • Python/Django TangoWithDjango Models and Databases
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • How to load view controller without button in storyboard?