We help IT Professionals succeed at work.

using jQuery to fade link's background color on hover

xill2678
xill2678 asked
on
Medium Priority
4,621 Views
Last Modified: 2012-05-06
i'm trying to figure out how to fade the colors and inner elements of a parent element on hover (element being a link, div, span, whatever...). i've found examples on EE and Google, but they all either fade only background images, or they require the colors to be assigned within the plugin.

what i'm trying to do is very simple, i want the hovered elements to display just like they would with pure css, i only want to add the jQuery fading effect to the transition rather than the "instant switch" css provides. but all element's attributes should be controlled with css. the div and it's child elements would fade in on hover, and fade out on mouseout. i cant imagine this plugin being more than 10 lines of code. i have similar functions setup that are 5 or 6 lines, but so i havent been able to modify them to act as desired :(
<style text/css>
.parent {padding:50px; background:#f00; border:1px solid #c00;}
.parent .text {color:#fff;}
.parent .another {color:#000;}
 
.parent:hover {background:#00f; border:1px solid #00c;}
.parent:hover .text {color:#c00;}
.parent:hover .another {color:#ccc;}
</style>
 
 
<div class="parent">
     <div class="text">some text here</div>
     <div class="another">another element here</div>
</div>

Open in new window

Comment
Watch Question

Commented:
You can use the jQuery color animations plugin:

http://plugins.jquery.com/project/color

Here's an example of usage:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <title>Page title</title>
    
    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/color.js"></script>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <script type="text/javascript">
        $(function () {
            $('p').animate({
                color: 'black'
            },2500);
        });
    </script>
</head>
 
<body>
 
    <p style="color: yellow;">Some sample text</p>
    
</body>
</html>

Open in new window

without plugin:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<style type="text/css">
.parent {padding:50px; background:#f00; border:1px solid #c00;}
.parent .text {color:#fff;}
.parent .another {color:#000;}
 
.parentHover {background:#00f; border:1px solid #00c;}
.parentHover .text {color:#c00;}
.parentHover .another {color:#ccc;}
</style>
<title>Page title</title>
<script type="text/javascript" src="lib/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
$(function () {
	$("div.parent").hover(
		function() {
			$("div.parent").fadeTo("normal", 0.2, function() {
				$("div.parent").addClass("parentHover");
			});
			$("div.parent").fadeTo("normal", 1);
		},
		function() {
			$("div.parent").fadeTo("normal", 0.2, function() {
				$("div.parent").removeClass("parentHover");
			});
			$("div.parent").fadeTo("normal", 1);
		}
	);
});
</script>
</head>
<body>
<div class="parent">
	<div class="text">some text here</div>
	<div class="another">another element here</div>
</div>
</body>
</html>

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.