0

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

$("#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"));
     });
});
1
  • jQuery removeClass() method doesn't accept a duration parameter. If you are including any other plugin, e.g jQuery UI, you should really including tag in question.
    – A. Wolff
    Nov 20, 2014 at 21:09

2 Answers 2

1

It looks like you are trying to give a time parameter to .removeClass() but when you think about it, an element either has a class or doesn't, there is no transition. Luckily, with CSS3 you don't need javascript to animate colors! To accomplish a smooth transition, give your base class (something like .tab) a rule like transition: background-color 0.5s ease; (with appropriate browser prefixes) and the starting colors. Give your color-palette classes the colors you want to transition to. You can then use some simple javascript to just toggle the color-palette classnames. CSS Tricks has (as usual) a useful article on CSS3 transitions here: http://css-tricks.com/almanac/properties/t/transition/.

0

Try out this plugin

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

Sample code of color animation

jQuery("#go").click(function(){
   jQuery("#block").animate({
        backgroundColor: "#abcdef"
   }, 1500 );
});
1
  • I guess OP is using jQuery UI which already supports color animation, so no need to include jquery-color plugin
    – A. Wolff
    Nov 20, 2014 at 21:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.