Animated character counter from zero to value using jQuery

Last Reply one year ago By dharmendr

Posted one year ago

Im working on lucky draw system.So dont know how to create animated letter increments similar to the way animated number counter.

 

JQuery : (it only read the number in notepad,it cannot read the letter)

    <script type="text/javascript">
        $('.Count').each(function () {
            $(this).prop('Counter',0).animate({
                Counter: $(this).text()
            }, {
                    duration: 2000,
                    easing: 'swing',
                    step: function (now) {
                        $(this).text(Math.ceil(now));
                    }
                });
        });
</script>

 

Asp.Net:

<b><asp:Label ID="Label1" runat="server" Text="" Font-Names="Krona One" Font-Size="70"
ForeColor="#ffff00" class="Count"></asp:Label></b>

 

You are viewing reply posted by: dharmendr one year ago.
Posted one year ago Modified on one year ago

Hi ash10,

Check this example. Now please take its reference and correct your code.

HTML

<div>
    <span class="Count">D</span>
    <br />
    <span class="Count">A</span>
    <br />
    <span class="Count">S</span>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.Count').each(function () {
            var $this = $(this);
            jQuery({ Counter: 0 }).animate({ Counter: $this.text().charCodeAt(0) }, {
                duration: 2000,
                easing: 'swing',
                step: function () {                    
                    $this.text(String.fromCharCode(this.Counter));
                }
            });
        });
    });
</script>

Screenshot