CODEWITHSUNDEEP
javascriptjquery
martin85
martin85

Reputation: 35

Jquery change border style on all specify divs

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);
});

Upvotes: 0

Views: 70

Answers (1)

Ruben-J
Ruben-J

Reputation: 2693

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);

Upvotes: 1

Related Questions