javascript - jQueryのリンクホバーのテキストがぼやけていますか?

Question

たとえば 500 ミリ秒続くぼやけた効果を作成したいと思います。その後、たとえば 250 ミリ秒続くいくつかのアニメーションで通常に戻ります。そのため、ユーザーがリンクにカーソルを合わせると、このリンク テキストにぼやけた/ぼやけた効果がアニメーション表示され、その後、通常の状態に戻ります。

このコードがあるとしましょう：

<a class="link-to-blurry" href="http://example.com">Text to blurry on hover</a>

これは、jQuery または追加の JavaScript プラグインを使用して実行できますか?

Answer 1

あなたはこのようなことを試すことができます：

CSS：

a, a:hover {
    color: black;
    font-size: 1.5em;
    text-decoration: none;      
}

.on {
    transition: text-shadow 500ms;
    -webkit-transition: text-shadow 500ms;
    -moz-transition: text-shadow 500ms;
    -ms-transition: text-shadow 500ms;
    -o-transition: text-shadow 500ms;
    text-shadow: 0 0 10px #000;
}

.off {
    transition: text-shadow 250ms;
    -webkit-transition: text-shadow 250ms;
    -moz-transition: text-shadow 250ms;
    -ms-transition: text-shadow 250ms;
    -o-transition: text-shadow 250ms;
    text-shadow: 0;
}

JS：

$('a').hover(function(){
    $(this).removeClass('off').addClass('on');
}, function(){
    $(this).removeClass('on').addClass('off');
});