插件照亮0.7与jQuery 1.9.1或jQuery-UI 1.10.3不兼容 – > TypeError：$ .css（…）未定义
jQuery或jQuery-UI中的更改与插件jquery.illuminate.0.7不兼容
插件jquery.illuminate.0.7适用于chrome 30，firefox 22和IE 10 。 它用
- jquery_1.6.1.min.js
- jQuery的ui_1.8.13.min.js
- jquery.illuminate.0.7.js
但是改变jQuery和jQuery-UI的版本会导致照明插件的演示仅适用于chrome 30 。 该演示使用
- jquery_1.9.1.js和
- jQuery的ui_1.10.3.js
- jquery.illuminate.0.7.js
在Firefox 22中它会导致以下错误：
TypeError: $.css(...) is undefined pointing to jquery.illuminate.0.7.js:223 HTML和js代码
window.onload = function(){ $("#illuminate").illuminate({ 'intensity': '0.3', 'color': '#98cb00', 'blink': 'true', 'blinkSpeed': '1200', 'outerGlow': 'true', 'outerGlowSize': '30px', 'outerGlowColor': '#98cb00' }); };
相关的html只是按钮
我试过了什么
我查看了illuminate插件的源代码，以查看错误发生的位置。 方法$.cssHooks.boxShadowBlur包含这个js：
$.cssHooks.boxShadowBlur = { get: function ( elem, computed, extra ) { return $.css(elem, support.boxShadow).split(rWhitespace)[5]; }, set: function( elem, value ) { elem.style[ support.boxShadow ] = insert_into($.css(elem, support.boxShadow), value, 5); } };
jquery的github页面仍然包含匹配函数 （参见第111行）：
jQuery.fn.extend({ css: function( name, value ) { ....
我的问题
- 在jQuery.js或jQuery-ui中是否发生了任何重大变化，可能导致
$.css(...)失败 - 我该怎么做才能使插件兼容最新（或至少1.9.1）版本的jquery和jquery-ui（1.10.3）
到目前为止更新和指针
用户戴夫问我如何加载JavaScript库。 我按以下顺序同步加载它们：
用户Sumurai指出， 它可能与已弃用的curCSS 。 我在jQuery 1.9.1中找到了以下代码：
jQuery.extend({ // Add in style property hooks for overriding the default // behavior of getting and setting a style property cssHooks: { opacity: { get: function( elem, computed ) { if ( computed ) { // We should always get a number back from opacity var ret = curCSS( elem, "opacity" ); return ret === "" ? "1" : ret; }//if }//get }//opacity },//cssHooks // more properties for jQuery.extend ....
所以jQuery 1.9.1仍然使用curCSS作为cssHooks.opacity 。 插件照亮为cssHooks增加了另一个属性： $.cssHooks.boxShadowBlur 。 但据我所知，这种方法与cssHooks.opacity 。 因此， curCSS应该没有效果。
嗯，这需要一些调试。
问题是照亮假设jQuery不支持box-shadow属性，但是更新的jQuery版本支持。 这意味着当供应商前缀不可用时（它们不在最新的FireFox中），您将获得无限循环或未定义属性。 幸运的是，照明带有一个未定义的属性BoxShadow而不是无限循环，这将来自使用boxShadow （因为我发现，导致几个浏览器挂起）。
那就是问题，解决的是什么？ 剥离有问题的代码从照亮。 所有support.boxShadow情况都应该更改为'boxShadow' ，并删除cssHooks.boxShadow块。 您也可以删除首先设置support.boxShadow的位。
我的测试用例在这里： http ： //jsfiddle.net/JbTcs/2/并且在FireFox和Chrome中工作，我告诉IE10。 照明的固定源代码是：
/* * jQuery Illuminate v0.7 - http://www.tonylea.com/ * * Illuminate elements in jQuery, Function takes the background color of an element * and illuminates the element. * * TERMS OF USE - jQuery Illuminate * * Open source under the BSD License. * * Currently incompatible with FireFox v.4 * * Copyright © 2011 Tony Lea * All rights reserved. * * Redistribution and use in source and binary forms, with or without modification, * are permitted provided that the following conditions are met: * * Redistributions of source code must retain the above copyright notice, this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * * modified version * */ (function($){ $.fn.illuminate = function(options) { var defaults = { intensity: '0.05', color: '', blink: 'true', blinkSpeed: '600', outerGlow: 'true', outerGlowSize: '30px', outerGlowColor: '' }; var options = $.extend(defaults, options); var original_color = ''; var new_color = ''; var dead = false; $.fn.illuminateDie = function() { dead = true; options.intensity = '0.05'; options.color = ''; options.blink = 'true'; options.blinkSpeed = '600'; options.outerGlow = 'true'; options.outerGlowSize = '30px'; options.outerGlowColor = ''; $(this).css({'boxShadow': '0px 0px 0px', 'background-color': "#" + original_color}); } function toggleIllumination(obj, original_color, new_color, outerGlow) { if(rgb2hex(obj.css('background-color')).toUpperCase() == original_color.toUpperCase()) { obj.animate({"background-color": "#" + new_color, 'boxShadowBlur': outerGlow }, parseInt(options.blinkSpeed), function(){ if(!dead) toggleIllumination($(this), original_color, new_color, outerGlow); }); } if(rgb2hex(obj.css('background-color')).toUpperCase() == new_color.toUpperCase()) { obj.animate({"background-color": "#" + original_color, 'boxShadowBlur': '0px' }, parseInt(options.blinkSpeed), function(){ if(!dead) toggleIllumination($(this), original_color, new_color, outerGlow); }); } } function colorAdd(hex, percent) { percentHex = parseInt(Math.round(parseFloat(percent)*16)); return hexAdd(hex[0], percentHex) + hexAdd(hex[1], percentHex) + hexAdd(hex[2], percentHex) + hexAdd(hex[3], percentHex) + hexAdd(hex[4], percentHex) + hexAdd(hex[5], percentHex); } function hexAdd(val, val2) { result = parseInt(val, 16) + val2; if(result > 15) return 'F'; return result.toString(16).toUpperCase(); } function rgb2hex(rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } return this.each(function() { obj = $(this); if(obj.is("input")){ if(obj.css('border') == ''){ obj.css('border', 'none') }; } dead = false; original_color = rgb2hex(obj.css('background-color')); if(options.color == ''){ new_color = colorAdd(original_color, options.intensity); } else { new_color = options.color.replace('#', ''); } var BlurColor = ''; if(options.outerGlowColor == ''){ BlurColor = new_color; } else { BlurColor = options.outerGlowColor.replace('#', ''); } obj.css('boxShadow','0px 0px 0px #'+BlurColor); var firstColor = ''; var firstBlur = ''; if(options.blink == 'true'){ firstColor = original_color; firstBlur = '0px'; } else { firstColor = new_color; firstBlur = options.outerGlowSize; } var outerGlow = ''; if(options.outerGlow == 'true'){ outerGlow = options.outerGlowSize; } else { outerGlow = '0px'; } obj.animate({"background-color": "#" + firstColor, 'boxShadowBlur': firstBlur }, parseInt(options.blinkSpeed), function(){ if(options.blink == 'true') toggleIllumination($(this), original_color, new_color, outerGlow); }); }); }; var div = document.createElement('div'), divStyle = div.style, support = $.support, rWhitespace = /\s/, rParenWhitespace = /\)\s/; div = null; function insert_into(string, value, index) { var parts = string.split(rWhitespace); parts[index] = value; return parts.join(" "); } $.cssHooks.boxShadowBlur = { get: function ( elem, computed, extra ) { return $.css(elem, 'boxShadow').split(rWhitespace)[5]; }, set: function( elem, value ) { elem.style[ 'boxShadow' ] = insert_into($.css(elem, 'boxShadow'), value, 5); } }; $.fx.step[ "boxShadowBlur" ] = function( fx ) { $.cssHooks[ "boxShadowBlur" ].set( fx.elem, fx.now + fx.unit ); }; })(jQuery);