Элегантный способ изменения цвета живота

Question

У меня есть 3 вкладки, которые должны иметь различный фон и цвет текста. Я создал 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); 
});