纯jQuery动画的特殊颜色过渡效果//没有ui或其他图书馆
我试图创建没有任何外部插件的jQuery颜色动画。 到目前为止，我可以设法用jQuery-ui做到这一点，但我想用pure jQuery animate()学习这种方式
有没有可能用更少的代码和1.8上没有任何外部jQuery插件来做到这一点？
这是使用jQuery 1.7.2和ui的 jsFiddle示例
jQuery的：
var Text = $('h1'); var Box = $('.box'); Text.click(function() { Text.animate({'color':'#f00'},600) .delay(200).animate({'color':'#ff0'},600) .delay(200).animate({'color':'#000'},600); }); Box.click(function() { Box.animate({'background-color':'#f00'},600) .delay(200).animate({'background-color':'#ff0'},600) .delay(200).animate({'background-color':'#000'},600); });
你问了更少的代码，所以这里是我用Google Closure Compiler缩小的相关代码 ：
(function(h,m){function n(a,b,c){var d=r[b.type]||{};if(null==a)return c||!b.def?null:b.def;a=d.floor?~~a:parseFloat(a);return isNaN(a)?b.def:d.mod?(a+d.mod)%d.mod:0>a?0:d.max6*c? a+6*(ba)*c:1>2*c?b:2>3*c?a+6*(ba)*(2/3-c):a}var w=/^([\-+])=\s*(\d+\.?\d*)/,v=[{re:/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,parse:function(a){return[a[1],a[2],a[3],a[4]]}},{re:/rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,parse:function(a){return[2.55*a[1],2.55*a[2],2.55*a[3],a[4]]}},{re:/#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,parse:function(a){return[parseInt(a[1],16),parseInt(a[2],16), parseInt(a[3],16)]}},{re:/#([a-f0-9])([a-f0-9])([a-f0-9])/,parse:function(a){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]}},{re:/hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,space:"hsla",parse:function(a){return[a[1],a[2]/100,a[3]/100,a[4]]}}],f=h.Color=function(a,b,c,d){return new h.Color.fn.parse(a,b,c,d)},k={rgba:{props:{red:{idx:0,type:"byte"},green:{idx:1,type:"byte"},blue:{idx:2,type:"byte"}}},hsla:{props:{hue:{idx:0, type:"degrees"},saturation:{idx:1,type:"percent"},lightness:{idx:2,type:"percent"}}}},r={"byte":{floor:!0,max:255},percent:{max:1},degrees:{mod:360,floor:!0}},t=f.support={},u=h("")[0],o,j=h.each;u.style.cssText="background-color:rgba(1,1,1,.5)";t.rgba=-1j.mod/2?e+=j.mod:ef>j.mod/2&&(e-=j.mod)),h[g]=n((fe)*b+e,d)))});return this[d](h)},blend:function(a){if(1===this._rgba[3])return this;var b=this._rgba.slice(),c=b.pop(),d=f(a)._rgba;return f(h.map(b,function(a,b){return(1-c)*d[b]+c*a}))},toRgbaString:function(){var a="rgba(",b=h.map(this._rgba,function(a,d){return null==a?2d&&(a=Math.round(100*a)+"%");return a});1===b[3]&&(b.pop(),a="hsl(");return a+b.join()+")"},toHexString:function(a){var b=this._rgba.slice(),c=b.pop();a&&b.push(~~(255*c));return"#"+h.map(b,function(a){a=(a||0).toString(16);return 1===a.length?"0"+a:a}).join("")},toString:function(){return 0===this._rgba[3]?"transparent":this.toRgbaString()}});f.fn.parse.prototype=f.fn;k.hsla.to=function(a){if(null==a[0]||null==a[1]||null==a[2])return[null, null,null,a[3]];var b=a[0]/255,c=a[1]/255,d=a[2]/255,a=a[3],g=Math.max(b,c,d),e=Math.min(b,c,d),i=ge,h=g+e,f=0.5*h;return[Math.round(e===g?0:b===g?60*(cd)/i+360:c===g?60*(db)/i+120:60*(bc)/i+240)%360,0===f||1===f?f:0.5>=f?i/h:i/(2-h),f,null==a?1:a]};k.hsla.from=function(a){if(null==a[0]||null==a[1]||null==a[2])return[null,null,null,a[3]];var b=a[0]/360,c=a[1],d=a[2],a=a[3],c=0.5>=d?d*(1+c):d+cd*c,d=2*dc;return[Math.round(255*p(d,c,b+1/3)),Math.round(255*p(d,c,b)),Math.round(255*p(d,c,b-1/3)), a]};j(k,function(a,b){var c=b.props,d=b.cache,g=b.to,e=b.from;f.fn[a]=function(a){g&&!this[d]&&(this[d]=g(this._rgba));if(a===m)return this[d].slice();var b,q=h.type(a),k="array"===q||"object"===q?a:arguments,l=this[d].slice();j(c,function(a,d){var b=k["object"===q?a:d.idx];null==b&&(b=l[d.idx]);l[d.idx]=n(b,d)});return e?(b=f(e(l)),b[d]=l,b):f(l)};j(c,function(d,b){f.fn[d]||(f.fn[d]=function(c){var e=h.type(c),g="alpha"===d?this._hsla?"hsla":"rgba":a,f=this[g](),j=f[b.idx];if("undefined"===e)return j; "function"===e&&(c=c.call(this,j),e=h.type(c));if(null==c&&b.empty)return this;"string"===e&&(e=w.exec(c))&&(c=j+parseFloat(e[2])*("+"===e[1]?1:-1));f[b.idx]=c;return this[g](f)})})});f.hook=function(a){a=a.split(" ");j(a,function(a,c){h.cssHooks[c]={set:function(a,b){var e,i="";if("string"!==h.type(b)||(e=s(b))){b=f(e||b);if(!t.rgba&&1!==b._rgba[3]){for(e="backgroundColor"===c?a.parentNode:a;(""===i||"transparent"===i)&&e&&e.style;)try{i=h.css(e,"backgroundColor"),e=e.parentNode}catch(j){}b=b.blend(i&& "transparent"!==i?i:"_default")}b=b.toRgbaString()}try{a.style[c]=b}catch(k){}}};h.fx.step[c]=function(a){a.colorInit||(a.start=f(a.elem,c),a.end=f(a.end),a.colorInit=!0);h.cssHooks[c].set(a.elem,a.start.transition(a.end,a.pos))}})};f.hook("backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor");h.cssHooks.borderColor={expand:function(a){var b={};j(["Top","Right","Bottom","Left"],function(c,d){b["border"+ d+"Color"]=a});return b}};o=h.Color.names={aqua:"#00ffff",black:"#000000",blue:"#0000ff",fuchsia:"#ff00ff",gray:"#808080",green:"#008000",lime:"#00ff00",maroon:"#800000",navy:"#000080",olive:"#808000",purple:"#800080",red:"#ff0000",silver:"#c0c0c0",teal:"#008080",white:"#ffffff",yellow:"#ffff00",transparent:[null,null,null,0],_default:"#ffffff"}})(jQuery);
在没有gzip或其他压缩的情况下，它在UTF8中约为7kb，并且允许您像以前使用jQuery UI一样动画颜色。 这意味着，它允许您在保持相同代码的同时删除jQuery UI。
小提琴
我还建议您更多地优先考虑您的开发时间。 第一次加载时7kb对任何最终用户都不会有明显的变化，甚至不会拨号。 这就是为什么我认为重构这是浪费时间的原因。 没有必要花费数小时/天重新发明轮子。 =]
如果没有插件或jquery ui，这是不可能的，据我所知，当然不能达到同样的准确度。 当然，除非您愿意使用大量的自定义编写函数，这些函数需要进行大量编码，但会产生与插件相同的结果，但需要付出更多努力和工作。
有很多插件可以使用，我非常喜欢jquery-color 。
就个人而言，我会说jquery ui是实现这一目标的最佳方式。
对不起，如果这不是我们希望的答案
编辑：
正如gautamdharmapuri所说，你可以简单地使用css函数和时间延迟或超时来改变颜色但是为了实现动画效果，你需要计算出它们之间的所有颜色，并且为了使它看起来光滑，你需要一个很多过渡。
有一个工作演示，我把这个想法放在这里http://jsfiddle.net/2EECN/21/它表明实际实现它将是相当密集的代码。
jQuery的：
$(function() { var textElem = $('h1'); var box = $('.box'); //Set up colour array colors = ["#000000", "#080000", "#100000", "#180000", "#200000", "#280000", "#300000", "#380000", "#400000", "#480000", "#500000", "#580000", "#600000", "#680000", "#700000", "#780000", "#800000", "#880000", "#900000", "#980000", "#A00000", "#A80000", "#B00000", "#B80000", "#C00000", "#C80000", "#D00000", "#D80000", "#E00000", "#E80000", "#F00000", "#F80000", "#FF0000"]; //Click event for text color textElem.click(function() { $.each(colors, function(index, color) { setTimeout(function() { textElem.css("color", color); }, 20 * index); }); }); //Click event for background color. box.click(function() { colors = ["#000000", "#080000", "#100000", "#180000", "#200000", "#280000", "#300000", "#380000", "#400000", "#480000", "#500000", "#580000", "#600000", "#680000", "#700000", "#780000", "#800000", "#880000", "#900000", "#980000", "#A00000", "#A80000", "#B00000", "#B80000", "#C00000", "#C80000", "#D00000", "#D80000", "#E00000", "#E80000", "#F00000", "#F80000", "#FF0000"]; $.each(colors, function(index, color) { setTimeout(function() { box.css("backgroundColor", color); }, 20 * index); }); }); });
在这个例子中，w3schools上的颜色只是一个hex颜色图表。 http://www.w3schools.com/cssref/css_colors.asp
改进的答案：
好吧，所以这实际上引起了我很多关于它将如何完成的兴趣，你可以通过以下示例实际看到，如果你明确地设置它，你可以更好地控制动画可以经历的周期。 http://jsfiddle.net/2EECN/21/ 。
它也看起来不错！ 所以我现在说这肯定是可能的并且可以实现，但是你最好将它打包成一个扩展Animatesfunction的小插件。