彩色开关上的动画

Question

我在一个网站上很忙，而且它需要很丰富，所以我得到了一个颜色列表，我就像：“嘿！让我们点击某些菜单项来切换容器顶部。”所以我决定使用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>

所以我在每个项目中定义了data-color，让我们进入实际的jQuery代码：

 $(".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));
}

但是现在，当颜色开关我希望淡出旧颜色并淡入新颜色时。我尝试了各种选项，例如fadeToggle或同时使用slideUp和slideDown，但不是我想要的。是否有可能实现我想要的目标？

由于

Answer 1

您应该能够淡出当前元素（通过将不透明度设置为0），更新背景颜色，然后在该动画完成后将其淡入淡出（jquery的动画会在回调时进行回调）原动画完成）。我已经汇总了一个相当通用的例子来说明这一点。

＆＃13;

＆＃13;

$('.fader').on('mouseenter', function() {
  var $this = $(this);
  $this.animate({
    opacity: 0
  }, 1000, function() {
    $this.css('background', 'blue');
    $this.animate({
      opacity: 1
    });
  });
})

＆＃13;

.fader {
  width: 150px;
  height: 150px;
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="fader"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以定义一个空的@keyframes并使用JavaScript以这种方式在点击事件上创建关键帧规则。

Fiddle |上的演示[查看编辑-webkit-支持]

HTML：

<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 />

的JavaScript / jQuery的：

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

CSS：

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

＆lt; ----------------------------- [编辑 - 添加了对-webit-浏览器的支持] --- -----------------------------＆GT;

Fiddle

上的演示

的JavaScript / jQuery的：

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