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:

http://flowplayer.org/tools/demos/tabs/mouseover.html

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 co开发者_开发知识库ntent 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

The below can be seen on jsfiddle.

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>

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.

Enjoy!

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:

http://www.w3schools.com/css/css_image_transparency.asp