javascript - 动画与IE文字阴影冲突

Question

我有 2 个小问题:1) 我使用基于 Kilian Valkof 插件的脚本在 IE7/8/9 中设置文本阴影。由于它们是动画的，当你在 IE 中鼠标悬停然后鼠标移出时，它们后面会产生一个黑框，一旦每个字母的动画完成后黑框就会消失。如果我注释掉 IE 插件，那么阴影当然不会在 IE 中呈现，但是黑框问题已经消失，所以这两个插件之间发生了一些事情需要一点帮助。我怎样才能让黑色闪烁停止？

这是一个 JSfiddle(已删除)

2) 我正在尝试在文本阴影插件中为任何 span.sl-w2 分配更大的宽度(参见代码注释“UPDATE WIDTH”)。跨度的宽度设置为自动，那么如何分配它，即 orig 宽度 + 一些数字？这是 textShadow 插件(已修改):

/* jQuery textShadow plugin for IE
* Version 1.1 (26/02/2010)
* @requires jQuery v1.2+
*
* Copyright (c) 2008 - 2010 Kilian Valkhof (kilianvalkhof.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* MODIFICATIONS made **
*/
(function($) {
  $.fn.textShadowls = function(useroptions) {
   return this.each(function() {
    var obj = $(this);
    // obj.removeTextShadowls(); // Don't know why this is necessary? 
    var col = '#000000'; // %id=?somecolor?%       
    var blurrad = 3; // %id=shblur1%
    var gstr = 8; // %id=shx1%
    var text = "<span class='jQshadls'>" + obj.html() + "</span>";
    var pleft = 3 + 'px';
    var initwd2 = obj.width();  // Should pull width from .sl-w2? I think that's $(this)
    console.log('This Init Width:' + initwd2);        
    var wd = initwd2 + gstr + 'px !important';
    var defaults = {
      color: col,
      blur: blurrad,
      glowstr: gstr,
      opacity: 60
    };
    var options = $.extend(defaults, useroptions);
    options.color = (options.color.length == 4) ? options.color.replace(/#([0-9A-f])([0-9A-f])([0-9A-f])/i, '#$1$1$2$2$3$3') : options.color;
    var filtertext = "glow(strength="+options.glowstr+" color="+options.color+")blur(strength="+options.blur+" direction=45)blur(strength="+options.blur+" direction=90)blur(strength="+options.blur+" direction=135)blur(strength="+options.blur+" direction=180)blur(strength="+options.blur+" direction=225)blur(strength="+options.blur+" direction=270)blur(strength="+options.blur+" direction=315)blur(strength="+options.blur+" direction=360)progid:DXImageTransform.Microsoft.Alpha(opacity="+options.opacity+")";
    if($.browser.msie && options != "") {
      if (obj.is('.sl-w2')) {
        // obj.css({"zoom":"1"}).append(text);
        obj.append(text);  
        obj.children("span.jQshadls").css({
          "position":"absolute",
          "width":wd,  
          "padding-left":pleft,
          "z-index":"-1",
          "zoom":"1",
          "filter":filtertext,
          "-ms-filter":filtertext 
        });
        $('span.sl-w2').css({'width':wd, 'padding-left':pleft});// UPDATE WIDTH 
      } else {
        // obj.css({"zoom":"1"}).append(text);
        obj.append(text);  
        obj.children("span.jQshadls").css({
          "position":"absolute",
          "z-index":"-1",
          "zoom":"1",
          "filter":filtertext,
          "-ms-filter":filtertext 
        });
        //obj.parent().
      }   
    }
  });
};
$.fn.removeTextShadowls = function() {
  return this.each(function() {
    $(this).children("span.jQshadls").remove();
  });
};
})(jQuery);

谢谢，比尔

BUMP:有人可以帮我解决这些问题吗 - 我真的很努力，但需要一些编码方面的帮助 :-) Bill

Answer 1

终于弄明白了 ;-) 只需要使用带 PixelRadius 和 ShadowOpacity 的模糊。

后来，比尔