Question

即时构建导航，我想添加一些功能。

点击一个div导航背景颜色淡出然后活动按钮淡化颜色但是当我点击另一个菜单按钮时，前一个按钮的颜色实际上就在那里...我希望只有acutally按钮淡化颜色导航中的背景和上一个删除颜色

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

$("#home0").click(function() {
    $("#navigation").stop().animate({"backgroundColor":"grey"}, 800);
    $(".active").stop().animate({"backgroundColor":"green"}, 800);

});

$("#home1").click(function() {
    $("#navigation").stop().animate({"backgroundColor":"black"}, 800);
    $(".active").stop().animate({"backgroundColor":"green"}, 800);
});

$("#home2").click(function() {
    $("#navigation").stop().animate({"backgroundColor":"grey"}, 800);
    $(".active").stop().animate({"backgroundColor":"green"}, 800);
});

这是我的代码，但不起作用：/

编辑：这是我的小提琴：Fiddle Demo

Answer 1

由于您使用javascript而不是CSS更改颜色，因此需要将style属性与active类一起删除..

$('.re').removeClass('active').removeAttr('style');

http://jsfiddle.net/gaby/tqYrT/3/

演示

但你应该用CSS和转换来处理这个问题..（见Using CSS transitions）

Answer 2

我建议使用CSS Transitions动画更改CSS。这是一个例子：

HTML：

在这里，我将所需的导航背景颜色存储为自定义数据属性（data-navbg）：

<div id="navigation">
    <div class="box" data-navbg="gray"></div>
    <div class="box" data-navbg="black"></div>
    <div class="box" data-navbg="gray"></div>
    <div class="box" data-navbg="black"></div>
    <div class="box" data-navbg="gray"></div>
</div>

JQUERY：

此处，单击框时，所有框都设置为不活动，单击框设置为活动，导航背景设置为所单击框的navbg属性指定的所需颜色。

$('.box').click(function () {
    var navbg = $(this).data('navbg');
    $('.box').removeClass('active');
    $(this).addClass('active');
    $('div#navigation').css('backgroundColor', navbg);
});

CSS：

这里，第一个定义将CSS过渡应用于导航和框：

#navigation, .box {
    -moz-transition:0.25s;
    -webkit-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
}

#navigation {
    background-color: black;
    height:60px;
    width: 600px;
    margin: 0 auto;
}

.box {
    width: 60px;
    height: 60px;
    float: left;
    background-color: #787878;
    margin-right: 5px;
    cursor: pointer;
}
.box.active {
    background-color: green;
}

Working Example (jsFiddle)

更改背景颜色和活动div颜色

2 个答案:

HTML：

JQUERY：

CSS：