动画文本阴影

Question

我的网站标题中有一些关键字。 每隔几秒钟，我就希望其中一个通过 CSS text-shadow 属性发光。

不过，JQuery 动画似乎不太支持 CSS text-shadow 属性。

http://jsfiddle.net/VWBsU/：这是我想要的结果，但发光必须淡入淡出。

http://jsfiddle.net/VWBsU/1/ 使用更常见的 CSS 属性，如颜色，动画效果完美，红色逐渐淡入。

http://jsfiddle.net/VWBsU/2/ 但是 CSS text-shadow 属性在尝试对其进行动画处理时甚至不会出现。

有人知道如何淡入和淡出 text-shadow 属性吗？

Answer 1

试试这个

JS 代码

var elements = jQuery("#top p").get();
setInterval(function() {
    var element = elements[Math.floor(Math.random() * elements.length)];
    $(element).toggleClass('glow').animate({
        textShadow: "rgba(255,255,255,1) 0 0 15px"
    },
    2000,
    function() {
        $(element).toggleClass('glow').animate({
            textShadow: "rgba(255,255,255,1) 0 0 0"
        });
    });
},
2000);

Answer 2

你可以在没有 jQuery 的情况下做到这一点。 这是示例。

HTML

<div id="top">
  <p id="test1">Fading Text Shadow 1</p>
  <p id="test2">Fading Text Shadow 2</p>
  <p id="test3">Fading Text Shadow 3</p>
  <p id="test4">Fading Text Shadow 4</p>
  <p id="test5">Fading Text Shadow 5</p>
</div>

CSS

#top p {
    text-shadow : 2px 2px 2px rgba(255, 0, 0, 0.05);
    /* Set shadow color by rgba() or rgb().
       Also, set alpha channel greater than 0 */
}

Javascript

onload = function() {
    var randomElm = function() {
        for(var i = Math.floor(Math.random() * elements.length); locArr[i];) {
            i = Math.floor(Math.random() * elements.length);
        }
        locArr[i] = true;
        fadeInTextShadow(elements[i], i);
        setTimeout(function() { randomElm(); }, 5000);
    },
    fadeInTextShadow = function(elm, n) {
        var tShadow = document.defaultView.getComputedStyle(elm).textShadow;
        if(tShadow && tShadow.match(/rgba?\(([0-9\.%]+)\s*,\s*([0-9\.%]+)\s*,\s*([0-9\.%]+)(\s*,\s*[0-9\.]+)?\)/)) {
            var r = RegExp.$1, g = RegExp.$2, b = RegExp.$3, a = RegExp.$4 ? RegExp.$4.replace(/^\s*,\s*/, '') * 1 + 0.05 : 0.05, rgba = 'rgba(' + r + ',' + g + ',' + b + ',' + (a < 1 ? a : 1) + ')';
            elm.style.textShadow = tShadow.replace(/rgba?\(.+?\)/, rgba);
            a < 1 ? setTimeout(function() { fadeInTextShadow(elm, n) }, 100) : (a >= 1 && setTimeout(function() { fadeOutTextShadow(elm, n) }, 3000));
        }
    },
    fadeOutTextShadow = function(elm, n) {
        var tShadow = document.defaultView.getComputedStyle(elm).textShadow;
        if(tShadow && tShadow.match(/rgba?\(([0-9\.%]+)\s*,\s*([0-9\.%]+)\s*,\s*([0-9\.%]+)(\s*,\s*[0-9\.]+)?\)/)) {
            var r = RegExp.$1, g = RegExp.$2, b = RegExp.$3, a = RegExp.$4 ? RegExp.$4.replace(/^\s*,\s*/, '') * 1 - 0.05 : 0.95, rgba = 'rgba(' + r + ',' + g + ',' + b + ',' + (a > 0.05 ? a : 0.05) + ')';
            elm.style.textShadow = tShadow.replace(/rgba?\(.+?\)/, rgba);
            a > 0.05 ? setTimeout(function() { fadeOutTextShadow(elm, n) }, 100) : locArr[n] = false;
        }
    },
    elements = document.querySelectorAll('#top p'),
    locArr = [];
    for(var i = 0, l = elements.length; i < l; i++) {
        locArr[locArr.length] = false;
    }
    randomElm();
}

实例

http://asamuzak.jp/test/textshadow_fade_test

Answer 3

jQuery 动画不支持文本阴影。但看起来你的问题已经在这里解决了：Animating elements of text-shadow with jQuery

您必须自己创建动画，最好的方法是扩展 jQuery 并创建自定义动画（如上面的链接中所示）。