Question

当我使用此功能点击它时，我想更改div的边框颜色但是当我点击3个div中的一个时，边框颜色更亮。

每个边框都会淡化颜色，但只有活动的颜色才会消失。为什么呢？

这是我的小提琴：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);
});

Answer 1

使用background-color代替backgroundColor。动画到透明无法正常工作。看看这篇文章jQuery animate to transparent

如果可以解决问题，您可以将其设置为白色。像这样： http://jsfiddle.net/YngEE/5/

    $(".active").stop().animate({"background-color":"#fff"}, 800);

Jquery在所有指定div上更改边框样式

1 个答案: