JQuery - Überblenden auf Mouse Hover

Question

Ich habe den folgenden JQuery-Code, um die Hintergrundfarbe eines div zu einer anderen Farbe zu verblassen, wenn die Maus über das div-Element schwebt. Es funktioniert gut, aber es erfordert jqueryui.js zu arbeiten. Meine Seiten verwenden die jquery.js bereits für andere Zwecke, also muss ich beide Frameworks laden.

Kann dies nur mit jquery statt jqueryui gemacht werden?

<!-- 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); 
}); 
}); 

Vielen Dank!

Answer 1

Ein wenig hacky, aber es ist das Beste, was ich mit ...

Arbeitsbeispiel einfiel: http://jsfiddle.net/Damien_at_SF/paDmg/

Code:

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

Fade im 'bg' div (die ist die Hintergrundfarbe) wenn man über den Inhalt schwebt ...

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

CSS für Positionierung:

#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 ist ein fantastisches Werkzeug, würde ich es auf jeden Fall über meine Lösung ...

Hoffnung, das hilft :)

Answer 2

Wenn Sie mit JQuery UI in Ordnung sind, eine bessere Lösung wäre gerade diese

$(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/