Question

我有这些divs填充数字。我试图根据点击的菜单更改这些数字，这是整齐的工作。但是我希望这个文本和一些像这里的动画一样改变

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

我的基本代码在这里解释 jsfiddle

因此，当我点击这16个按钮中的任何一个时，网格内的值应该反对并改变。问题是它没有动画但是立即显示结果

希望我说清楚

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>

Answer 1

您作为演示提供的链接实际上不是动画，它只是重新渲染值。

我为你的案子编了一些柜台。请参阅：Updated Jsfiddle

这对你有用。在Updated Jsfiddle您可以针对不同的行为更改某些代码行：

如果您想提高计数值的速度。你可以改变：

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

到：

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

替换＆＃34; YOUR_VALUE＆＃34;用int（毫秒）。值越高，速度越低。

使用javascript更改文本onclick div与动画

1 个答案: