I am trying to use code given at
http://jsfiddle.net/Jf4vB/211/. The code runs perfectly in fiddle but when I trying to excute same code in my projuect I am not getting that "Glow Effect"
My code is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.red {
font-size: 50px;
color: #c61a1a;
cursor: pointer;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.20.js"></script>
<script type="text/javascript">
$(function () {
var red = $(".red");
var v = $('#btn');
$.fn.glowEffect = function (start, end, duration, callback) {
if (this.data("last-glow"))
start = this.data("last-glow");
return this.animate({
'placeholder': end
}, {
duration: duration,
step: function (now, fx) {
now = parseInt(start + (end - start) * (fx.pos));
$(fx.elem).css("text-shadow", "0px 0px " + now + "px #c61a1a")
.data("last-glow", now);
},
complete: callback
});
};
v.click(function () {
red
.stop()
.glowEffect(0, 50, 1000,
function () {
$(this).glowEffect(50, 0, 1000);
});
});
});
</script>
<style type="text/css">
.red {
font-size:50px;
color:#c61a1a;
cursor:pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="red">Here is my text.</div>
<button type="button" id="btn">Click Me!</button>
</form>
</body>
</html>
I am also modifying above code to use asp button and text of checkbox to glow.But I am still unable to get the effect I am looking for.
Can anyone please help me?