How do I animate a glowing effect on text?
You can use .animate
to cycle to a chosen colour to create a "highlight" effect which is presumably what "glowing" means.
$(".confirm_selection").hover(function() {
$(this).animate({
color: "red"
}, 2000);
}, function() {
$(this).animate({
color: "black"
}, 2000);
});
You can try it here.
NOTE: Colour animation requires the use of either the colour animation plugin, or jQuery UI (which I assume you are already using as it has been included in your fiddle).
Try this code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function ()
{
var glow = $('h1');
setInterval(function()
{
glow.toggleClass('glow');
}, 1000);
});
</script>
<style type="text/css">
h1 {
-webkit-transition: text-shadow 1s linear;
-moz-transition: text-shadow 1s linear;
-ms-transition: text-shadow 1s linear;
-o-transition: text-shadow 1s linear;
transition: text-shadow 1s linear;
width: 725px;
}
h1:hover,
h1.glow
{
text-shadow: 0 0 10px Green;
}
</style>
</head>
<body>
<h1>This text has Glow Animation Effect</h1>
<div class="buttons">
<input type="text" name="txt"> <input type="button" class="btnAdd" value="Add"><br>
</div>
<h3>J Query</h3>
</body>
</html>
If you want to just use CSS3, you don't even have to use any jQuery/JavaScript. Just do this in your CSS:
.confirm_selection {
-webkit-transition: text-shadow 0.2s linear;
-moz-transition: text-shadow 0.2s linear;
-ms-transition: text-shadow 0.2s linear;
-o-transition: text-shadow 0.2s linear;
transition: text-shadow 0.2s linear;
}
.confirm_selection:hover {
text-shadow: 0 0 10px red; /* replace with whatever color you want */
}
Here's the fiddle: http://jsfiddle.net/zenjJ/
If you want the element to run on its own (without hovering), do this:
CSS:
.confirm_selection {
-webkit-transition: text-shadow 1s linear;
-moz-transition: text-shadow 1s linear;
-ms-transition: text-shadow 1s linear;
-o-transition: text-shadow 1s linear;
transition: text-shadow 1s linear;
}
.confirm_selection:hover,
.confirm_selection.glow {
text-shadow: 0 0 10px red;
}
JavaScript:
var glow = $('.confirm_selection');
setInterval(function(){
glow.toggleClass('glow');
}, 1000);
You can play around with the timing in the CSS/JavaScript to get the exact effect you're looking for.
And finally, here's the fiddle: http://jsfiddle.net/dH6LS/
Update Oct. 2013: being that all major browsers now support CSS animations, all you need is this:
.confirm_selection {
animation: glow .5s infinite alternate;
}
@keyframes glow {
to {
text-shadow: 0 0 10px red;
}
}
.confirm_selection {
font-family: sans-serif;
font-size: 36px;
font-weight: bold;
}
<span class="confirm_selection">
[ Confirm Selection ]
</span>
Here's the fiddle: http://jsfiddle.net/dH6LS/689/
Don't forget to include all the different vendor prefixes in production.
You can do this with pure CSS3 transitions:
div.transition{
text-decoration: none;
color: blue;
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;
background-color:#000;
font-size:2em;
width:300px;
height:100px;
padding:1em;
}
div.transition:hover {
color: #fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}
Example: http://jsfiddle.net/jasongennaro/z5jCB/1/
Note: Glowing text works best on a dark background.
Inspiration (and much of the code) from here: http://www.sitepoint.com/css3-glowing-link-effect/