优雅的方式来动画颜色变化

我有3个标签应该有不同的背景和文字颜色。我用CSS样式创建了3个类（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")); 
    }); 
});

来源

2014-11-20 user2135738

jQuery'removeClass（）'方法不接受持续时间参数。如果你包含任何其他插件，例如jQuery UI，你应该真的包含标签。 – 2014-11-20 21:09:03

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

来源

2014-11-21 00:02:45 nabrown78

试试这个插件彩动画的

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

示例代码

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

来源

2014-11-20 21:05:33

我猜OP是使用jQuery UI，它已经支持彩色动画，所以不需要包含jquery-color插件 – 2014-11-20 21:09:42

优雅的方式来动画颜色变化

回答

相关问题