animate-textshadow.js - Animated CSS text shadows with jQuery

animate-textshadow is a simple, lightweight (< 1KB minified + gzipped) jQuery plugin which lets you animate an element's text-shadow property, using jQuery's regular .animate method. The plugin should work with all browsers that support the text-shadow property: Firefox 3.1+, Chrome 2+, Opera 9.5+ (untested), Safari 1.1+ (untested), IE9+. Requires jQuery 1.4+

animate-textshadow is based on Edwin Martin's excellent Shadow animation plugin. The plugin is distributed under the MIT License.

Basic Usage

HTML:

<span id="basic">Click me</span>

CSS:

.text {
	text-shadow: 3px 3px 3px #ccc;
	/* text-shadow must have an initial value for the animation to work. To animate from a "shadowless" state, set the shadow to 0 offset and 0 blur (e.g. 0 0 0 #000;) */
}

Javascript:

.text {
$(document).ready(function() {
	$("#basic").click(function() { $(this).animate({textShadow: "#f0f 10px 10px 10px;"}); });
});

The textShadow property is made up of a color, and 3 absolute lengths:

• right - governs how far to the right the shadow is offset. A negative value offsets the shadow to the left.
• bottom - governs how far below the text the shadow is offset. A negative value offsets the shadow above the text.
• blur - governs the blur radius of the shadow.

For more see the associated W3C spec.

The color can be in hex or RGB, the lengths can be in px, pt or em.

Demos

Subtle hover

$("#subtle").hover(function() { 
	$(this).animate({textShadow: "#aaa 6px 6px 6px"});
}, function() { 
	$(this).animate({textShadow: "#ccc 3px 3px 3px"});
});

Glow

$("#glow").hover(function() { 
	$(this).animate({textShadow: "#f00 0 0 15px"});
}, function() { 
	$(this).animate({textShadow: "#f00 0 0 0"});
});

Slow