0

http://jsfiddle.net/Jf4vB/211/にあるコードを使用しようとしています。コードはフィドルで完全に実行されますが、プロジェクトで同じコードを実行しようとすると、「グロー効果」が得られません

私のコードは次のとおりです。

<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();" />

私が達成しようとしているのは、スタートボタンをクリックすると->チェックボックス（「こんにちは」）の横にあるテキストは、ストップボタンをクリックするまで、上記のフィドルのように継続的に効果があるはずです。

4

4 に答える 4

0

これを試して

<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>
于 2013-07-10T06:43:46.030 に答える
0

Found my own mistake. It was IE9's compatible view which was preventing proper running of code. The code excuted correctly in chrome and guided me in correct direction.

于 2013-07-17T04:35:55.793 に答える
0

このコードを確認してください

 <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>
于 2013-07-10T06:29:29.073 に答える
0

スクリプトの前に open スクリプト タグを見逃していませんか?

<script type="text/javascript" src="../Scripts/jquery-1.7.1.js"></script>
// this one
<script type="text/javascript">
    function changeColor(id) {...}
</script>
于 2013-07-10T05:49:38.953 に答える