5

ここで共有されているスニペットを使用して、テキストシャドウをアニメーション化してフェードインおよびフェードアウトしようとしています。

jQueryを使用したテキストシャドウの要素のアニメーション化

私のコードは基本的に次のとおりです。

$.fx.step.textShadowBlur = function(fx) {
    $(fx.elem).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px white'});
};

$("#seconds").animate({textShadowBlur:20}, {duration: 300, complete: function() { 
    $("#seconds").animate({textShadowBlur:0}, {duration: 300}); 
}});

私が抱えている問題は、「フェードアウト」部分が機能していないように見えることです。シャドウブラーは20に増加し、次に0に「リセット」されます。

問題のjsfiddle：http: //jsfiddle.net/ANs92/

4

1 に答える 1

4

アニメーション化するプロパティの現在の状態を要素のプロパティに保存する必要があります。それ以外の場合、$。animateは、アニメーションが開始するたびにプロパティが0であると見なします。また、0から0までアニメートしても、何もアニメートされません。

このように動作します：

$.fx.step.textShadowBlur = function(fx) {
    $(fx.elem)
        .prop('textShadowBlur', fx.now)
        .css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px black'});
};

setInterval(function() {
    $("#seconds").animate({textShadowBlur:20}, {
        duration: 300,
        complete: function() { 
            $("#seconds").animate({textShadowBlur:0}, {duration: 300}); 
        }
    });
}, 1000);

実例：http： //jsfiddle.net/ANs92/16/

注意：setIntervalを使用すると、問題が発生する可能性があります：http: //bonsaiden.github.com/JavaScript-Garden/#other.timeouts- >setIntervalを使用した呼び出しのスタック

setIntervalは、次の呼び出しを発行するまで最初の呼び出しが完了するのを待たないため、呼び出しがスタックする可能性があります。

于 2012-08-17T23:18:51.233 に答える