Hi,
I have this code that animates links when you move the mouse over/out
using the hover() but the thing is: the page does not have always the
same link colors. For instance, some parts of the webpage has links
that have color A and B (a:link and a:hover respectively) some other
parts have links of color C and color D (a:link and a:hover
respectively) and in the future I might need some other website parts
to have even more different colors, currently, I only have these 2.
And the code for all that is as follows:
/**
* Adds a fade effect to links on mouse hover
*/
function enableFadingLinks() {
// Get the link colors from the external CSS file
var linkColors = getColorsFromCSS('links');
// Double check if the colors were retrieved
if (linkColors) {
// Function hook to each 'a' element found on the specific ID
$('div#cpblock-links a').each(function(){
// Little bug fix for first mouseover
$(this).css({
color: linkColors[0]
});
// Function hooks to the hover event of the 'a' element
$(this).hover(
function() {
$(this).stop();
$(this).animate({ color: linkColors[1]
}, 150);
},
function() {
$(this).stop();
$(this).animate({ color: linkColors[0]
}, 150);
}
);
});
// Function hook to each 'a' element found on the specific ID
$('div#content a').each(function(){
// Little bug fix for first mouseover
$(this).css({
color: linkColors[2]
});
// Function hooks to the hover event of the 'a' element
$(this).hover(
function() {
$(this).stop();
$(this).animate({ color: linkColors[3]
}, 150);
},
function() {
$(this).stop();
$(this).animate({ color: linkColors[2]
}, 150);
}
);
});
}
}
As you can see, there's a bunch of code that I repeat and the only
differences are the colors that I pass to the code that depend on what
links we are animating. I'm looking for a way to compact this code, to
make it smaller (less lines of code).
Do you have any suggestions?
P.S.: Just in case you need to know, I'm using the color plugin to be
able to animate the color properties of the elemnts.
P.S.2.: Also, if you know of a better a way to have color fading
links, let me know... I've already wasted lots of times in this little
link effect and I've only come up with this result.
