Question

我使用以下代码将特定文本设置为白色：

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

然后我想用这段代码将#links ul li a更改为黑色（联系人也在其中）：

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

但不知何故，它不会将整行/联系人改回黑色

我该如何解决这个问题？提前致谢！

Answer 1

试试这段代码：

您的脚本中错过了ID选择器。

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

Answer 2

$(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);
    };

});

}）;

Answer 3

这可能是一个特异性问题。动画直接在元素上设置样式。因此，如果您将元素设置为白色，并将该元素的祖先设置为黑色，则直接在元素上设置的样式（白色）将始终胜过祖先（黑色）上设置的样式。

换句话说，您需要删除元素上设置的样式，或者将其设置为$( "a:contains('Contact')" ).animate( { color: 'black' }, 200 );行的原始值。

这假设基本颜色动画有效，即你有a plugin来处理它。 jQuery can't handle color animations开箱即用。

无法将文本颜色设置为较早的值

3 个答案: