JQuery - 鼠标悬停时淡入颜色

Question

我有以下 JQuery 代码，当鼠标悬停在 div 元素上时，将 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/