c# - How to glow label text using Jquery

Question

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:

<script type="text/javascript" src="../Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
function changeColor(id) {
        nIntervId = setInterval("flashText('"+id+"')", 1000);
    }
$.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 + (start - end) * (fx.pos));
                    $(fx.elem).css("text-shadow", "0px 0px" + now + "px #c61a1a").data("last-glow", now);
                },
                complete: callback
            });
    };
function flashText(id) {        
var oElem = $('#'+id).find(":checkbox").next();
        oElem.stop()      .glowEffect(0, 50, 1000,
            function () {
                $(this).glowEffect(50, 0, 1000);
            });
    }
function stopTextColor() {
        clearInterval(nIntervId);
    }    
</script>
<div id="divchkBox">
    <asp:CheckBox ID="chkBox" runat="server" Text="hi" />
</div>
<asp:Button ID="start" Text="start" runat="server" OnClientClick="changeColor('divchkBox');" />
<asp:Button ID="stop" Text="stop" runat="server" OnClientClick="stopTextColor();" />

all I am trying achieve is, on click of start button -> text next to checkbox("Hi") should have the effect as in above fiddle continuously till I click on stop button.

score 0 · Accepted Answer

发现了自己的错误。是 IE9 的兼容视图阻止了代码的正常运行。代码在 chrome 中正确执行并引导我朝着正确的方向前进。

score 0 · Accepted Answer

您是否错过了脚本之前的打开脚本标签？

<script type="text/javascript" src="../Scripts/jquery-1.7.1.js"></script>
// this one
<script type="text/javascript">
    function changeColor(id) {...}
</script>

score 0 · Accepted Answer

尝试这个

<style type="text/css">
  .red
  {
    font-size: 50px;
    color: #c61a1a;
    cursor: pointer;
  }
</style>


<div id="divchkBox">
    <asp:CheckBox ID="chkBox" runat="server" Text="hi" CssClass="red" />
</div>
<asp:Button ID="start" Text="start" runat="server" 
     OnClientClick="return changeColor('chkBox');" />
<asp:Button ID="stop" Text="stop" runat="server" 
     OnClientClick="return stopTextColor();" />



<script type="text/javascript">

function changeColor(id) {
  nIntervId = setInterval("flashText('" + id + "')", 1000);
  return false;
}
$.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
     });

};

function flashText(id) {
 var oElem = $('#' + id).next();
 oElem.stop().glowEffect(0, 50, 1000,
               function () {
                    $(this).glowEffect(50, 0, 1000);
                });
}

function stopTextColor() {
  clearInterval(nIntervId);
  return false;
}

</script>

score 0 · Accepted Answer

请检查此代码

 <html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

    <link rel="stylesheet" href="/resources/demos/style.css" />
    <style>
        .divchkBox
        {
            font-size: 50px;
            color: #c61a1a;
            cursor: pointer;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            var divchkBox = $(".divchkBox");
            var v = $('#<%=start1.ClientID %>'); //$('#start');


            $.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() {

                divchkBox
        .stop()
        .glowEffect(0, 50, 1000,
                    function() {
                        $(this).glowEffect(50, 0, 1000);
                    });
                return false;
            });

            e.click(function() {
                alert('e');
                divchkBox
        .stop()
        .glowEffect(0, 50, 1000,
                    function() {
                        $(this).glowEffect(50, 0, 1000);
                    });
            });


        });
    </script>

</head>
<body>
    <form runat="server">
    <div class="divchkBox">
        <asp:CheckBox ID="chkBox" runat="server" Text="hi asdfasdf asdfas dfasdf" />
    </div>

    <asp:Button ID="start1" Text="start" runat="server"   />

    </form>
</body>
</html>

c# - How to glow label text using Jquery

4 回答 4

Related

Reference