title: Elegant way to animate color change
body: <p>I have 3 tabs which should have different background and text color. I have created 3 classes in CSS with this styles (collor-pallet-1, 2, 3). I am currently doing this ugly thing which also does not work smoothly. Surely there must be a better way to do this? Thanks</p>
  
  <pre><code>$("#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"));
       });
  });
  </code></pre>