JQuery - マウスを動かすと色が薄くなる

Question

div要素の上にマウスを置くと、divの背景色を別の色にフェードインする次のJQueryコードがあります。素晴らしいですが、jqueryui.jsが動作する必要があります。私のページはすでに他の目的でjquery.jsを使用しているので、両方のフレームワークをロードする必要があります。

これはjqueryuiではなくjqueryでのみ行うことができますか？

<!-- 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

リトルビットハックが、その私は、実施例

...思い付くことが最高：http://jsfiddle.net/Damien_at_SF/paDmg/

コード： 'BG' で

<div id="frmLogin"> 
    <div id="bg"></div> 
    <div id="text">BLAH BLAH HAHAHAH</div> 
</div> 

フェード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、より良いとOKであればソリューションは、ちょうどこの

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

DEMO次のようになります。http://jsfiddle.net/Starx/KpEMc/1/