插件jquery.illuminate.0.7有效 in chrome 30, firefox 22 and IE 10 。它使用
但是改变 causes the demo of the illuminate plugin to only work in chrome 30 的jQuery和jQuery-UI版本。该演示使用
在firefox 22中，它会导致以下错误：
TypeError: $.css(...) is undefined pointing to jquery.illuminate.0.7.js:223
<script>
window.onload = function(){
$("#illuminate").illuminate({
'intensity': '0.3',
'color': '#98cb00',
'blink': 'true',
'blinkSpeed': '1200',
'outerGlow': 'true',
'outerGlowSize': '30px',
'outerGlowColor': '#98cb00'
});
};
</script>
相关的html只是按钮
<button type="submit" class="btn" id="illuminate" >submit</button>
我浏览了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 still contains a matching function的github页面（见第111行）：
jQuery.fn.extend({
css: function( name, value ) { ....
$.css(...)失败用户Dave问我是如何加载javascript库的。我按以下顺序同步加载它们：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="jquery.illuminate.0.7.js"></script>
用户Sumurai指出it could have to do with the deprecated 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应该没有效果。
答案 0 :(得分：2)
唔，这需要一些调试。
问题在于，illuminate假设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);