Javascript 颜色开关上的动画

我在忙一个站点，它需要全彩色，所以我得到了一个颜色列表，我想：“嘿！让我们在单击某些菜单项时切换容器顶部。”所以我决定使用jQuery数据属性：

<a onclick="loadSubmenu(5)" class="item" data-color="006496"> <div class="point" id="blauw">
                <p>Leden</p>
            </div></a>
            <a onclick="loadSubmenu(4)" class="item" data-color="169600"> <div class="point" id="groen">
                <p>Game</p>
            </div></a>
            <a onclick="loadSubmenu(3)" class="item" data-color="967F00"> <div class="point" id="geel">
                <p>Radio</p>
            </div></a>
            <a onclick="loadSubmenu(2)" class="item" data-color="964B00"> <div class="point" id="oranje">
                <p>Nieuws</p>
            </div></a>
            <a onclick="loadSubmenu(1)" class="item" data-color="960000"> <div class="point" id="currentrood">
                <p>Home</p>
            </div></a>

但是现在，当颜色切换时，我想淡出旧颜色，淡入新颜色。我尝试了各种选项，如

fadeToggle

或同时使用

slideUp

和

slideDown

，但没有一个像我想要的那样工作。有可能实现我想要的吗

---

感谢您，您应该能够淡出当前元素（通过将不透明度设置为0），更新背景色，然后在动画完成后淡入（jquery的动画会在原始动画完成时回调）。下面我用一个相当一般的例子来说明这一点

$（'.fader'）。在（'mouseenter'，function（）上{
var$this=$（this）；
$this.animate({
不透明度：0
}，1000，函数（）{
$this.css（'background'，'blue'）；
$this.animate({
不透明度：1
});
});
})

.fader{
宽度：150px；
高度：150像素；
背景：红色；
}

---

您可以定义一个空的

@keyframes

，并使用JavaScript以这种方式在单击事件上创建关键帧规则

演示|[检查编辑以获得

-webkit-

支持] HTML: 演示 JavaScript/jQuery：

函数findRule（）{
var规则；
var ss=document.styleSheets；
对于（变量i=0；i

您是否尝试过设置动画？我想这就是答案。或者你可以使用这个插件：@David从我当前的JS文件中可以这样做吗？这就是你想要的吗？（将鼠标悬停在红方块上）--在我看来，您可以通过将“不透明度”更改为0来淡出，然后在完成后，更改背景色并淡入。@brb完全正确地编码！谢谢如果你把它写进一个答案，我会接受并投你一票；DCool，我在下面添加了可运行的代码段。谢谢

 $(".item").click(function(){
        backgroundKleur = '#' + $(this).data('color');

        changeColors(backgroundKleur);

        $(".item").removeClass('bold-font');
        $(this).addClass('bold-font');

    });
function changeColors(backgroundKleur){
    $("#submenu-container").css('background-color', backgroundKleur);
    $(".content_small_top").css('background-color', backgroundKleur));
}

<div class="item" data-color="red">Red</div>
<br />
<div class="item" data-color="green">Green</div>
<br />
<div class="item" data-color="blue">Blue</div>
<br />
<div class="item" data-color="sienna">Sienna</div>
<br />
<div class="item" data-color="chocolate">Chocolate</div>
<br />
<div class="item" data-color="Maroon">Maroon</div>
<br />

function findRule() {
    var rule;
    var ss = document.styleSheets;
    for (var i = 0; i < ss.length; ++i) {
        for (var j = 0; j < ss[i].cssRules.length; ++j) {
            rule = ss[i].cssRules[j];
            if (rule.name == "changeColor" && rule.type == window.CSSRule.KEYFRAMES_RULE) {
                return rule;
            }
        }
    }
}
var cssRule = findRule();
$('.item').click(function () {
    var color = $(this).attr('data-color');
    cssRule.appendRule("0% {color: " + $(this).css('color') + "; }");
    cssRule.appendRule("50% {color: white;}");
    cssRule.appendRule("100% { color:  " + color + "; }");
    $('.item').removeClass('animate');
    $(this).addClass('animate');
    $('.animate').css({
        'color': color
    });
});

@-moz-keyframes changeColor {
}
.animate {
    animation: changeColor 2s 1;
}
div {
    font-size: 20px;
}

function findRule() {
    var rule;
    var ss = document.styleSheets;
    for (var i = 0; i < ss.length; ++i) {
        for (var j = 0; j < ss[i].cssRules.length; ++j) {
            rule = ss[i].cssRules[j];
            if (rule.name == "changeColor" && rule.type == window.CSSRule.WEBKIT_KEYFRAMES_RULE) {
                return {
                    r: rule,
                    type: 'webkit'
                };
            }
            if (rule.name == "changeColor" && rule.type == window.CSSRule.KEYFRAMES_RULE) {
                return {
                    r: rule,
                    type: ''
                };
            }
        }
    }
}
var cssRule = findRule();
$('.item').click(function () {
    var color = $(this).attr('data-color');
    if (cssRule.type == 'webkit') {
        cssRule.r.insertRule("0% {color: " + $(this).css('color') + "; }");
        cssRule.r.insertRule("50% {color: white;}");
        cssRule.r.insertRule("100% { color:  " + color + "; }");
    } else {
        cssRule.r.appendRule("0% {color: " + $(this).css('color') + "; }");
        cssRule.r.appendRule("50% {color: white;}");
        cssRule.r.appendRule("100% { color:  " + color + "; }");
    }
    $('.item').removeClass('animate');
    $(this).addClass('animate');
    $('.animate').css({
        'color': color
    });
});