Question

I would like to create a blurry effect that will last e.g. 500 ms and then it goes back to normal in some animation that will last e.g. 250ms. So, if the user hover over the link it will animate a blurry/fuzzy effect on this link text and then goes back to normal.

Let’s say I have this code:

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

Can this be done using jQuery or some additional JavaScript plugin?

Answer 1

You could try something like this:

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');
});