優雅的方式來動畫顏色變化

我有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

優雅的方式來動畫顏色變化

回答

相關問題