淡入/淡出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编码是:

 
home services contact
.. content ..
.. content ..
.. content ..

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

任何帮助非常感谢

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

  

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

请享用!

以下可以在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上。

   

这可能有效:

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

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

也可以看看:

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