CODEWITHSUNDEEP
javascriptjquery
FlyingUnderpants
FlyingUnderpants

Reputation: 101

Cannot animate text color to earlier value

I have animated a specific text to white with this code:

$("a:contains('Contact')").animate({color: 'white'},200);

and then I want to change the #links ul li a to black (the Contact is also in it) with this code:

$('links a').animate({color: 'black'},200);

But somehow it does not change back the whole row / contact to black

how can I fix this? Thanks in advance!

Upvotes: 2

Views: 56

Answers (3)

hashchange
hashchange

Reputation: 7225

This might be an issue of specificity. The animations set the styles directly on the elements. So if you animate an element to white, and an ancestor of that element to black, the style set directly on the element (white) will always trump the style set on the ancestor (black).

In other words, you need to remove the style set on the element, or animate it back to its orginal value, along the lines of $( "a:contains('Contact')" ).animate( { color: 'black' }, 200 );.

This is assuming that the basic color animation works, ie that you have a plugin in place to handle it. jQuery can't handle color animations out of the box.

Upvotes: 0

FlyingUnderpants
FlyingUnderpants

Reputation: 101

$(document).ready(function(){

//Hover over links 
$('#links a, #footerMenuList a').mouseenter(function(){
    $(this).stop().animate({color: 'white'},200);
});

$('#links a, #footerMenuList a').mouseleave(function(){
    $(this).stop().animate({color: '#9099af'},200);
});

//Check if div in on the screen and highlight specific link

//Get top of div
//Get Bottom of div
//Get window top
//Get window Bottom
//Check if Y coörds are in windows
//Highlight specif link
var win = $(window);

//Give all boxes properties
 var services = {
    top: $('#services').position().top,
    bottom: $('#services').position().top + $('#services').height()
};   

var portfolio = {
    top: $('#portfolio').position().top,
    bottom: $('#portfolio').position().top + $('#portfolio').height()
};

var buy = {
    top: $('#buy').position().top,
    bottom: $('#buy').position().top + $('#buy').height()
};

var about = {
    top: $('#about').position().top,
    bottom: $('#about').position().top + $('#about').height()
};

var footer = {
    top: $('#footer').position().top,
    bottom: $('#footer').position().top + $('#footer').height()
};

var winHeight = win.height();
var winTop = win.scrollTop();
var winBottom = winHeight + winTop;

if(winTop === 0) {
    $('links ul li a').css('color','#9099af');
    $("a:contains('Home')").animate({color: 'white'},200);
};

//check which is on screen 
win.scroll(function(){
    winHeight = win.height();
    winTop = win.scrollTop();
    winBottom = winHeight + winTop; 


    if(services.top > winTop) {
        if(services.bottom < winBottom) {
            $('links ul li a').animate({color: '#9099af'},200);
            $("a:contains('Services')").animate({color: 'white'},200);
        };
    };

    if(portfolio.top > winTop) {
        if(portfolio.bottom < winBottom) {
            $('links ul li a').animate({color: '#9099af'},200);
            $("a:contains('Portfolio')").animate({color: 'white'},200);
        };
    };

    if(buy.top > winTop) {
        if(buy.bottom < winBottom) {
            $('links ul li a').animate({color: '#9099af'},200);
            $("a:contains('Buy')").animate({color: 'white'},200);
        };
    };

    if(about.top > winTop) {
        if(about.bottom < winBottom) {
            $('links ul li a').animate({color: '#9099af'},200);
            $("a:contains('About')").animate({color: 'white'},200);
        };
    };

    if(footer.top > winTop) {
        if(footer.bottom < winBottom) {
            $('links ul li a').animate({color: '#9099af'},200);
            $("a:contains('Contact')").animate({color: 'white'},200);
        };
    };

    if(winTop === 0) {
        $('links ul li a').animate({color: '#9099af'},200);
        $("a:contains('Home')").animate({color: 'white'},200);
    };

});

});

Upvotes: 0

RGS
RGS

Reputation: 5211

Try this code:

You have missed id selector in your script.

$('#links ul li a').animate({color: 'black'}, 200);

Upvotes: 2

Related Questions