0

i want to change the border color of my div when i click on it with this function but when i click on one of the 3 divs the border color is much brighter.

Every Border fades the color but only the active not. Why?

Here is my Fiddle: Fiddle Demo

$('.re').click(function() {
    $('.re').removeClass('active').removeAttr('style');
    $(this).addClass('active');
});



$(".test1").click(function() {
    $(".mainNavitem").stop().animate({"border-right-color":"rgba(255,255,255, 0.2)"}, 800);
    $(".active").stop().animate({"backgroundColor":"transparent"}, 800);
    $(".bg").stop().animate({"backgroundColor":"rgb(199, 55, 59)"}, 800);

    });

$(".test2").click(function() {
    $(".mainNavitem").stop().animate({"border-right-color":"rgba(255,255,255, 0.5)"}, 800);
    $(".active").stop().animate({"backgroundColor":"transparent"}, 800);
    $(".bg").stop().animate({"backgroundColor":"rgb(199, 55, 59)"}, 800);
});

$(".test3").click(function() {
    $(".mainNavitem").stop().animate({"border-right-color":"rgba(255,255,255, 1)"}, 800);
    $(".active").stop().animate({"backgroundColor":"transparent"}, 800);
    $(".bg").stop().animate({"backgroundColor":"rgb(199, 55, 59)"}, 800);
});
martin85
  • 35
  • 6

1 Answers1

1

Use background-color instead of backgroundColor. And animating to transparent doesn't work properly. Check out this post jQuery animate to transparent

You could animate to white if that solves the problem. Like this: http://jsfiddle.net/YngEE/5/

    $(".active").stop().animate({"background-color":"#fff"}, 800);
Community
  • 1
  • 1
Ruben-J
  • 2,663
  • 15
  • 33