0

私のウェブサイトのヘッダーにいくつかのキーワードがあります。数秒ごとに、そのうちの1つをCSStext-shadowプロパティで光らせたいと思います。

ただし、JQueryアニメーションはCSStext-shadowプロパティを十分にサポートしていないようです。

http://jsfiddle.net/VWBsU/：これは私が望む結果の一種ですが、グローはフェードインおよびフェードアウトする必要があります。

http://jsfiddle.net/VWBsU/1/色などのより一般的なCSSプロパティを使用すると、アニメーションは完全に機能し、赤い色がフェードインします。

http://jsfiddle.net/VWBsU/2/しかし、CSS text-shadowプロパティは、アニメーション化しようとしても表示されません。

text-shadowプロパティをフェードインおよびフェードアウトする方法を知っている人はいますか？

4

3 に答える 3

2

これを試して

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);
于 2012-09-10T09:54:02.087 に答える
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

于 2012-09-10T14:51:19.720 に答える
0

テキストシャドウはjQueryアニメーションではサポートされていません。しかし、あなたの問題はすでにここで解決されているようです：jQueryを使用したテキストシャドウの要素のアニメーション化

自分でアニメーションを作成する必要があります。これを行うための最良の方法は、jQueryを拡張し、カスタムアニメーションを作成することです（上記のリンクのように）。

于 2012-09-10T09:37:16.623 に答える