繁体   English   中英

jQuery背景颜色RGB条件错误

[英]jquery background-color rgb conditional mistake

我已经测试了其余的代码,并且可以,但是在这里不起作用。

这是代码中有错误或某些内容的部分。

if(bgc.css("background-color") == "rgb(38,64,163)") {
    bgc.animate({backgroundColor:"rgb(134,210,239)"},800, function() {
        $previousAnchor = $anchor,
        $anchor.fadeIn(fadetime);
    });
} else if(bgc.css("background-color") == "rgb(134,210,239)") {
    bgc.animate({backgroundColor:"rgb(38,64,163)"},800, function() {
        $previousAnchor = $anchor,
        $anchor.fadeIn(fadetime);
    });
}

请注意,“ $ previousAnchor”,“ $ anchor”和“ bgc”是变量。 我已经研究了所有这些代码,并且在Jquery的“ backgroundColor”动画中必须存在一个问题,但是我不知道如何解决它。

编辑:

我修复了if语句,将空格放在RGB代码中,如下所示

if(bgc.css("background-color") == "rgb(38, 64, 163)")

现在它进入了,但是动画没有起作用。 它什么也不做,继续执行其余的回调函数。

编辑解决

对于所有使用Background -COLOR动画jquery遇到问题的人,您需要以下代码: github.com

您需要一个名为jquery.color.js的插件

添加以下JS(jQuery 颜色插件 ),( 此处的最小版本)

(function(d){d.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(f,e){d.fx.step[e]=function(g){if(!g.colorInit){g.start=c(g.elem,e);g.end=b(g.end);g.colorInit=true}g.elem.style[e]="rgb("+[Math.max(Math.min(parseInt((g.pos*(g.end[0]-g.start[0]))+g.start[0]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[1]-g.start[1]))+g.start[1]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[2]-g.start[2]))+g.start[2]),255),0)].join(",")+")"}});function b(f){var e;if(f&&f.constructor==Array&&f.length==3){return f}if(e=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}if(e=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)){return[parseFloat(e[1])*2.55,parseFloat(e[2])*2.55,parseFloat(e[3])*2.55]}if(e=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}if(e=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}if(e=/rgba\(0, 0, 0, 0\)/.exec(f)){return a.transparent}return a[d.trim(f).toLowerCase()]}function c(g,e){var f;do{f=d.css(g,e);if(f!=""&&f!="transparent"||d.nodeName(g,"body")){break}e="backgroundColor"}while(g=g.parentNode);return b(f)}var a={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]}})(jQuery);

测试例:

var element = $("#test");
$('#test').click(function() {
    if (element.css("background-color")==="rgba(0, 0, 0, 1)") {
        element.animate({ backgroundColor: "blue" }, 'fast');
    }else{
        element.animate({ backgroundColor: "red" }, 'fast');
    }
});

​

这是一个小提琴: http : //jsfiddle.net/GMNV9/1/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM