Question

我有3个标签，应该有不同的背景和文字颜色。我用CSS创建了3个CSS类（collor-pallet-1,2,3）。我目前正在做这个丑陋的事情，但也不能顺利进行。当然必须有更好的方法来做到这一点？感谢

$("#tab1").click(function() {

    $(".resp-tab-content").addClass("color-pallet-1");
    if ($(".resp-tab-content").hasClass("color-pallet-2")) {
        $(".resp-tab-content").removeClass("color-pallet-2", 500);
    }
    if ($(".resp-tab-content").hasClass("color-pallet-3")) {
        $(".resp-tab-content").removeClass("color-pallet-3", 500)
    }
    $(".tab-background").css("background-color", function() {
        return $(".resp-tab-content").css("background-color");
        console.log($(".resp-tab-content").css("background-color"));
    });
});
$("#tab2").click(function() {

    $(".resp-tab-content").addClass("color-pallet-2");
    if ($(".resp-tab-content").hasClass("color-pallet-1")) {
        $(".resp-tab-content").removeClass("color-pallet-1", 500);
    }
    if ($(".resp-tab-content").hasClass("color-pallet-3")) {
        $(".resp-tab-content").removeClass("color-pallet-3", 500);
    }
    $(".tab-background").css("background-color", function() {
        return $(".resp-tab-content").css("background-color");
        console.log($(".resp-tab-content").css("background-color"));
    });
});
$("#tab3").click(function() {

     $(".resp-tab-content").addClass("color-pallet-3");
     if ($(".resp-tab-content").hasClass("color-pallet-2")) {
         $(".resp-tab-content").removeClass("color-pallet-2", 500);
     }
     if ($(".resp-tab-content").hasClass("color-pallet-1")) {
         $(".resp-tab-content").removeClass("color-pallet-1", 500);
     }
     $(".tab-background").css("background-color", function() {
         return $(".resp-tab-content").css("background-color");
         console.log($(".resp-tab-content").css("background-color"));
     });
});

Answer 1

看起来你正试图给.removeClass()一个时间参数但是当你想到它时，一个元素要么有一个类，要么没有，没有转换。幸运的是，使用CSS3你不需要javascript来动画颜色！要完成平滑过渡，请为您的基类（类似.tab）提供类似transition: background-color 0.5s ease;（带有适当的浏览器前缀）和起始颜色的规则。为颜色调色板类提供要转换的颜色。然后，您可以使用一些简单的JavaScript来切换颜色调色板类名。 CSS Tricks（像往常一样）在这里有一篇关于CSS3过渡的有用文章：http://css-tricks.com/almanac/properties/t/transition/。

Answer 2

试试这个插件

https://github.com/jquery/jquery-color

彩色动画示例代码

jQuery("#go").click(function(){
   jQuery("#block").animate({
        backgroundColor: "#abcdef"
   }, 1500 );
});

优雅的动画颜色变化方式

2 个答案: