?
Solved

using jQuery to fade link's background color on hover

Posted on 2009-02-17
2
Medium Priority
?
4,574 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

0
Comment
Question by:xill2678
2 Comments
 
LVL 5

Expert Comment

by:prokvk
ID: 23675834
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

0
 
LVL 6

Accepted Solution

by:
ali_pakkan earned 2000 total points
ID: 23676393
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

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month15 days, 10 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question