淡入/淡出js mouseover事件

我希望在我的页面上实现一个鼠标hover事件的菜单 –

我左边有3个标题，右边有相应的内容div，相关文字出现在右边。

在为所有论坛寻找工作的js解决方案之后，我已经解决了：

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

它使用一个非常简单的js函数：

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

然而，我希望做的是合并一个fadeIn（），fadeOut效果，这样当用户将鼠标hover在页面左侧的标题上时，现有的内容会逐渐消失，相应的内容将淡入查看。 …..

html编码是：

 
    
 
 .. content .. 
 
 .. content .. 
 
 .. content ..  

我试图在这个网站上加入线程5404775，但根本无法让它工作！

任何帮助非常感谢

Answer 1

我假设您希望人们将鼠标hover在此处的图像按钮上，以使相应的div淡入和淡出。 他们在该网站上所做的事情将无法正常工作，因为褪色效果需要Javascript。 JQuery使这很容易。 我建议尝试类似的东西

我测试了这个，它的工作原理。 你要确定的一件事是div的css将它们设置为在开始时不可见，除非你想要其中一个可见，在这种情况下，该div的id应该是你设置oldSelected的id在function的开头。

请享用！

Answer 2

以下可以在jsfiddle上看到 。

你可以像这样在鼠标hover时淡入淡出

 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; }); } }); 

我还添加了一些东西，以确保在页面加载时只显示您想要首先显示的那个。 我假设它将是家庭div。

将其添加到CSS

 .hidden{ display:none; } 

并将该课程放在其他div上。

 
 .. services.. 
 
 .. contact ..  

Answer 3

这可能有效：

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

Answer 4

另一个想法（没有Jquery）：你可以使用CSS opacity:x属性（对于firefox）或filter:alpha(opacity=x) （对于IE）来改变元素的不透明度。 可以通过小的减速循环获得淡入/淡出。

也可以看看：

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