JQuery – 在鼠标hover时淡出颜色

当鼠标hover在div元素上时，我有以下JQuery代码将div的背景颜色淡化为不同的颜色。 它工作得很好，但它需要jqueryui.js才能工作。 我的页面已经将jquery.js用于其他目的，所以我必须加载两个框架。

这可以只用jquery而不是jqueryui来完成吗？

 $(document).ready(function(){ $('#page_effect').fadeIn(1000); });  $(document).ready(function(){ $("#frmLogin").hover( function() { $(this).stop().animate({ backgroundColor: "#fff"}, 800); }, function() { $(this).stop().animate({ backgroundColor: "#e6e6e6" }, 800); }); }); 

谢谢！

Answer 1

有点hacky，但它是我能想到的最好的……

工作示例： http ： //jsfiddle.net/Damien_at_SF/paDmg/

码：

 
 
 
BLAH BLAH HAHAHAH
  

将鼠标hover在内容上时淡入’bg’div（这是背景颜色）…

 $(document).ready(function(){ $("#text").hover( function() { $("#bg").stop().fadeOut(); }, function() { $("#bg").stop().fadeIn(); }); }); 

用于定位的CSS：

 #frmLogin { position:relative; height:400px; width:800px; } #bg{ position:absolute; width:100%; height:100%; border:1px solid black; background:#e6e6e6; } #text { background:transparent; position:absolute; width:100%; height:100%; border:1px solid black; } 

jQueryUI是一个很棒的工具，我肯定会在我的解决方案中使用它…

希望有所帮助:)

Answer 2

如果你对Jquery UI没问题，那么更好的解决方案就是这样

 $(document).ready(function(){ $("#sample").mouseover(function() { $(this).animate({ backgroundColor:'#f00'},1000); }).mouseout(function() { $(this).animate({ backgroundColor:'#ccc'},1000); }); }); 

演示： http ： //jsfiddle.net/Starx/KpEMc/1/