JQuery - Fade To Color On Mouse Hover

Question

I have the following JQuery code to fade the background color of a div to a different color when the mouse hovers over the div element. It works great but it requires jqueryui.js to work. My pages already use the jquery.js for other purposes, so I have to load both frameworks.

Can this be done only with jquery instead of 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);
    });
});

Thank you!

Why does this require jQueryUI? `animate()` is part of the jQuery library. — Marcus Whybrow, Jan 06 '11 at 05:43
but it cannot utilise backgroundColor, that is a jqueryUI extension — Damien-Wright, Jan 06 '11 at 05:45
Then you should use the color plugin to allow you to animate colors: http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — Marcus Whybrow, Jan 06 '11 at 05:47
I believe the idea/question that the OP asks is can it be done **only with jquery**, implying no plugins. — Damien-Wright, Jan 06 '11 at 05:50
Does this Color Fading Menu with jQuery tutorial help at all? http://css-tricks.com/color-fading-menu-with-jquery/ — Matt V., Jan 06 '11 at 05:56
I posted a solution with no plugins, but it's a fairly hacky solution... best I can do without plugins though :) — Damien-Wright, Jan 06 '11 at 06:06
OK, Thank you all! For now I'm going to stick with jqueryui although Matt's suggested article also works. — , Jan 06 '11 at 06:14
@Damien, It doesn't make sense to do something with "only jquery and no plugins". The color plugin *is written with jQuery*, and designed specifically for this purpose. Why not use it? I think the OP just doesn't want to use the whole jQuery UI library when all he needs is color animation... — David Tang, Jan 06 '11 at 06:16
@box9 think the idea was no links except to the jquery library... i know plugins are just jquery, but the idea was to create the same effet without relying on external sources (whether that be a downloaded local plugin, or a cdn link) personally i agree, linking other plugins and libraries are the way to go, and the OP ended up following that, but the initial question was for an alternative solution :) — Damien-Wright, Jan 06 '11 at 20:13

score 9 · Answer 1 · answered Jan 06 '11 at 07:37

9

If you are OK with Jquery UI, a better solution would be just this

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

answered Jan 06 '11 at 07:37

Starx

77,474
47
185
261

1

Far better solution. But can you explain why it requires jQuery UI? I mean it does, I tested it. But why does it? – Nov 23 '12 at 11:36
4

Also: I updated your snippet a little bit and added .stop(). Now it doesn't have any strange behavior when you hover it multiply times quickly. http://jsfiddle.net/KpEMc/1561/ – Nov 23 '12 at 11:39
1

@prc322, Its because normal jQuery library does not support animating `background-color`. – Starx Nov 23 '12 at 14:02
Thats pretty strange but seems to be the reason. Thank you! – Nov 23 '12 at 20:16
Very basic and simple example. Good solution and easy to follow! – mwilson Aug 01 '14 at 02:11

score 4 · Accepted Answer · answered Jan 06 '11 at 06:00

Little bit hacky, but its the best I could come up with...

Working example: http://jsfiddle.net/Damien_at_SF/paDmg/

Code:

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

Fade in the 'bg' div (which is the background colour) when hovering over the content...

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

CSS for positioning:

#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 is an awesome tool, I'd definitely use it over my solution...

Hope that helps :)

JQuery - Fade To Color On Mouse Hover

2 Answers2

Linked