CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Venkateshwaran Selvaraj
Venkateshwaran Selvaraj

Reputation: 1785

Change text onclick div with animation using javascript

I have these divs filled with numbers. I was trying to change these numbers based on the menu clicked, which is working neatly. But I want this text change along with some animation like here

http://bfintal.github.io/Counter-Up/demo/demo.html.

My basic code is explained here jsfiddle.

So when I click on any of those 16 buttons, the values inside the grid should counterup and change. The problem is that it doesn't animate but shows the result immediately

Hope I made it clear

JS:

$('.one').click(function() {
  $('#aries').show( "slow" ).html('60');
  $('#taurus').show( "slow" ).html('20');
  $('#gemini').show( "slow" ).html('30');
  $('#cancer').show( "slow" ).html('10');
  $('#leo').show( "slow" ).html('50');
  $('#virgo').show( "slow" ).html('40');
  $('#libra').show( "slow" ).html('90');
  $('#scorpio').show( "slow" ).html('70');
  $('#sagittarius').show( "slow" ).html('33');
  $('#capricorn').show( "slow" ).html('98');
  $('#aquarius').show( "slow" ).html('56');
  $('#pisces').show( "slow" ).html('88');
});

$('.two').click(function() {
  $('#aries').show( "slow" ).html('60');
  $('#taurus').show( "slow" ).html('60');
  $('#gemini').show( "slow" ).html('60');
  $('#cancer').show( "slow" ).html('60');
  $('#leo').show( "slow" ).html('60');
  $('#virgo').show( "slow" ).html('60');
  $('#libra').show( "slow" ).html('60');
  $('#scorpio').show( "slow" ).html('60');
  $('#sagittarius').show( "slow" ).html('60');
  $('#capricorn').show( "slow" ).html('60');
  $('#aquarius').show( "slow" ).html('60');
  $('#pisces').show( "slow" ).html('60');
});


$('.three').click(function() {
   $('#aries').show( "slow" ).html('65');
  $('#taurus').show( "slow" ).html('60');
  $('#gemini').show( "slow" ).html('84');
  $('#cancer').show( "slow" ).html('74');
  $('#leo').show( "slow" ).html('21');
  $('#virgo').show( "slow" ).html('77');
  $('#libra').show( "slow" ).html('44');
  $('#scorpio').show( "slow" ).html('78');
  $('#sagittarius').show( "slow" ).html('65');
  $('#capricorn').show( "slow" ).html('36');
  $('#aquarius').show( "slow" ).html('29');
  $('#pisces').show( "slow" ).html('81');
});

HTML:

<div class="outer">
            <div id="aries" class="button turquoise">12</div>
        </div>

        <div class="outer">
            <div id="taurus" class="button peterriver">11</div>
        </div>

        <div class="outer">
            <div id="gemini" class="button emerland">7</div>
        </div>

        <div class="outer">
            <div id="cancer" class="button amethyst">8</div>
        </div>

        <div class="outer">
            <div id="leo" class="button wisteria">9</div>
        </div>

        <div class="outer">
            <div id="virgo" class="button sunflower">4</div>
        </div>

        <div class="outer">
            <div id="libra" class="button wetasphalt">5</div>
        </div>

        <div class="outer">
            <div id="scorpio" class="button belizehole">6</div>
        </div>

        <div class="outer">
            <div id="sagittarius" class="button nephritis">1</div>
        </div>

        <div class="outer">
            <div id="capricorn" class="button alizarin">2</div>
        </div>

        <div class="outer">
            <div id="aquarius" class="button greensea">3</div>
        </div>

        <div class="outer">
            <div id="pisces" class="button orange">10</div>
        </div>

Upvotes: 0

Views: 1138

Answers (1)

Ifch0o1
Ifch0o1

Reputation: 924

The link your provided as demo is not actually animation, it's just re-rendering the values.

I maded some kind of counter for your case. See: Updated Jsfiddle

This will work for you. In Updated Jsfiddle You can change some lines of code, for different behavior:

  1. If you want to increase the speed of counting values. You can change:

    line 56: smoothCount(div, start, end, 2);

to :

`smoothCount(div, start, end, YOUR_VALUE);`

Replace "YOUR_VALUE" with an int (miliseconds). Higher values will decrease the speed.

Upvotes: 2

Related Questions