Question

$('.alphabetLetter').click(function() {
    if($(this).css('color') == 'black') {
        $(this).animate({'opacity':0.2},500);
    } else if($(this).css('opacity') == '0.2') {
        $(this).animate({
            'color':'#aa0000',
            'opacity':1
        },500);
    } else {
        $(this).animate({'color':'black'},500);
    }
});

我正在尝试将不透明度为1的黑色字母与不透明度为0.2的黑色字母更改为每次点击时不透明度为1的红色字母。这似乎不起作用，我对其原因一无所知。

Answer 1

尝试使用rgb值而不是颜色名称。 jsFiddle here

$('.alphabetLetter').click(function() {
    if($(this).css('color') == 'rgb(0, 0, 0)') {
        $(this).animate({'opacity':0.2},500);
    } else if($(this).css('opacity') == '0.2') {
        $(this).animate({
            'color':'#aa0000',
            'opacity':1
        },500);
    } else {
        $(this).animate({'color':'black'},500);
    }
});

注意：您当前的逻辑将始终只执行第一个条件语句，因为您正在检查color = black，它始终是 - else if将不会运行，即使opacity也是如此1}} = 0.2

Answer 2

jQuery通过RGB语法处理颜色属性。有关更深入的信息，请阅读http://api.jquery.com/css/。

我为你和其他偶然发现这个问题的人澄清了一点点小提琴。

http://jsfiddle.net/dKXGJ/

至于你的问题，你正在检查字符串值'black'，它总是返回false。总是。您需要检查rgb(0,0,0)值。

一个更好，更细节的小提琴

http://jsfiddle.net/dKXGJ/3/

快乐编码，将该语法应用于您的逻辑，您应该没问题。：）

尝试css每次点击都会更改属性值

2 个答案: