彩色开关上的动画

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

 
 
Leden
   
 
Game
   
 
Radio
   
 
Nieuws
   
 
Home
  

所以我在每个项目中定义了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的animate在原始动画完成时进行回调）。 我已经汇总了一个相当通用的例子来说明这一点。

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

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

Answer 2

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

小提琴演示| [检查编辑-webkit-支持]

HTML：

 
Red
 
 
Green
 
 
Blue
 
 
Sienna
 
 
Chocolate
 
 
Maroon
 
 

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

<----------------------------- [编辑 - 增加了对-webit- browsers的支持] --------- ----------------------->

小提琴上的演示

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