Also you could add something like:
function getFn( color ){
return function(){
$(this).stop().animate({ color:linkColors[color] },150};
};
};
And then: $('#cpblock-links a').css('color',
linkColors[0] ).hover( getFn(1), getFn(0) );
Ariel Flesler
On 15 feb, 16:32, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> function enableFadingLinks() {
> var linkColors = getColorsFromCSS('links');
> if ( !linkColors) return;
> $('#cpblock-links a').css('color', linkColors[0] ).hover(
> function(){
> $(this).stop().animate({ color: linkColors[1] },
> 150);
> },
> function(){
> $(this).stop().animate({ color: linkColors[0] },
> 150);
> }
> );
> $('#content a').css('color', linkColors[2] ).hover(
> function(){
> $(this).stop().animate({ color: linkColors[3] },
> 150);
> },
> function(){
> $(this).stop().animate({ color: linkColors[2] },
> 150);
> }
> );
>
> };
>
> You can also avoid repeating first and second part with some wicked
> check, like adding a class to all of them and doing like:
> var color = linkColors[ $(this).is('.cp-block') ? 1 : 2 ];
> That's just an example, not using logic numbers.
>
> Remember.. chain, chain, chain.
>
> Hope that helps
>
> Ariel Flesler
>
> On 15 feb, 15:48, Nazgulled <[EMAIL PROTECTED]> wrote:
>
>
>
> > 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.- Ocultar texto de la
> > cita -
>
> - Mostrar texto de la cita -
