우아한 색상 변환 방법

Question

배경과 텍스트 색상이 다른 3 개의 탭이 있습니다. 이 스타일 (collor-pallet-1, 2, 3)으로 CSS에서 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

것 같습니다이 플러그인을 시도하지만, 당신이 생각하는 경우 그것에 대해 요소가 클래스를 가졌거나 가지지 않는 경우 전환이 없습니다. 다행히도 CSS3를 사용하면 색상을 애니메이션화하는 데 자바 스크립트가 필요하지 않습니다! 원활한 전환을 수행하려면 기본 클래스 (예 : .tab)에 transition: background-color 0.5s ease; (적절한 브라우저 접두어 사용) 및 시작 색상과 같은 규칙을 지정하십시오. 색상 팔레트 클래스에 전환 할 색상을 지정하십시오. 그런 다음 간단한 자바 스크립트를 사용하여 색상 팔레트 클래스 이름을 전환 할 수 있습니다. CSS Tricks는 (보통 때와 마찬가지로) CSS3 전환에 대한 유용한 기사를 여기에 가지고 있습니다 : http://css-tricks.com/almanac/properties/t/transition/.

Answer 2

는 .removeClass()에 시간 매개 변수를 제공하기 위해 노력하고있다처럼 컬러 애니메이션의

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

샘플 코드는

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