JQuery - 在鼠标悬停时淡出颜色

Question

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

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

<!-- fade page onload -->
$(document).ready(function(){
    $('#page_effect').fadeIn(1000);
});
<!-- fade login form to color on hover -->
$(document).ready(function() {
    $("#frmLogin").hover(function() {
        $(this).stop().animate({ backgroundColor: "#fff"}, 800);
    }, function() {
        $(this).stop().animate({ backgroundColor: "#e6e6e6" }, 800);
    });
});

谢谢!

Answer 1

如果你对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/