1

黒のエラー メッセージ テキストを「光る」、赤のアウトラインが 1 秒後に消えるようにしたいのですが、更新すると「完全に光る」に戻り、完全に消えていなくても再び消え始めます。そもそも。これを行うためのかなり簡単なjQuery/CSSの方法はありますか? 私は 2 つの同時フェード技術が互いに競合すると思います。非同期であり、すべてです。光る効果を生成する方法や、標準的なスタイリングを使用してそれが可能かどうかはよくわかりません。

4

6 に答える 6

5

外部プラグインを使用する必要はありません。jQuery 1.8とcss3だけでこれを行うことができますが、簡単ではありません。css3text-shadowプロパティを組み合わせる必要がありますanimate()

更新:バグが修正されました。

ここでは、jsFiddle テキスト グロー効果が機能しています。

jQuery:

var red = $(".red");
red.click(function() {
   if ( !$(this).is(':animated') )

    //you just adjust here
    red.glowEffect(0,40,500);
    //which is:
    //red.glowEffect( start value , destination value , duration );
});

$.fn.glowEffect = function(start, end, duration) {
    var $this = this;
    return this.css("a", start).animate({
        a: end
    }, {
        duration: duration,
        step: function(now) {
            $this.css("text-shadow","0px 0px "+now+"px #c61a1a");
        }
    });
};​

CSS:

.red { text-shadow: 0px 0px 0px #c61a1a; }

注:-webkit- -ms- -moz- -o- jQuery 1.8 が自動的に修正するようなベンダー プレフィックスを定義する必要はありません。

出典:先週も同様の質問をしましたが、素晴らしい回答が得られました。

css遷移を使用せずにjQuery animateをcss3プロパティと組み合わせる方法は?

于 2012-08-29T21:32:13.177 に答える
2

ここから恥知らずに盗まれた純粋なCSS3ソリューション：

a.glow, a.glow:hover, a.glow:focus {  
    text-decoration: none;  
    color: #aaf;  
    text-shadow: none;  
    -webkit-transition: 500ms linear 0s;  
    -moz-transition: 500ms linear 0s;  
    -o-transition: 500ms linear 0s;  
    transition: 500ms linear 0s;  
    outline: 0 none;  
} 
a.glow:hover, a.glow:focus  {  
    color: #fff;  
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;  
}
于 2012-08-29T21:34:23.670 に答える
2

これは、否定的なアニメーションで機能する barlasapaydin の回答のバージョンです。

$.fn.glowEffect = function(start, end, duration, callback) {
    // Fetch last animation position
    if (this.data("last-glow")) 
        start = this.data("last-glow");

    return this.animate({
        'placeholder': end // This can be anything, it's just a placeholder to allow the animation to run
    }, {
        duration:duration,
        step: function(now, fx) {
            // Calculate current position
            now = parseInt(start + (end - start)*(fx.pos));
            // Set current animation position
            $(fx.elem).css("text-shadow","0px 0px "+now+"px #c61a1a")
                // Save position (if animation is interrupted)
                .data("last-glow", now);
        },
        complete:callback
    });
};

$(".red").click(function() {
    $(this)
        .stop()
        .glowEffect(0,50,1000, // Fade in
                    function() 
                    { 
                        $(this).glowEffect(50,0,1000);  // Fade out
                    });
});

コードは少し複雑ですが、完全に機能します。

http://jsfiddle.net/Jf4vB/38/

「ステップ」オブジェクトに関する役立つサードパーティのドキュメント:

http://cdmckay.org/blog/2010/03/01/the-jquery-animate-step-callback-function/

于 2012-08-30T11:32:13.170 に答える
0

グロー効果にはCSS3の「text-shadow」プロパティを使用し、$（ "。textid"）。stop（）。addClass（ "glow"、1000）;を使用します。アニメーション用。

編集：わかりました、それは機能しませんでした：http: //jsfiddle.net/2pBxP/ :)

于 2012-08-29T21:30:37.297 に答える
0

JQueryでループアニメーションを作成するには、次のようにします。

JQueryはループと遅延でフェードします

その後、CSS3を使用してテキストグロー（またはシャドウ）を追加できますが、これは一部のブラウザではサポートされていないことに注意してください。

于 2012-08-29T21:31:29.517 に答える
0

jQuery UI のアニメーション プラグインを使用すると、(CSS3 プロパティを使用して) テキストの背後にぼやけた赤い影を作成し、その不透明度、サイズなどをアニメーション化できます。

于 2012-08-29T21:28:33.337 に答える