Question

我想在某个div值中执行一些数字动画，问题是动画每次从0开始，但我不想要这个，我希望它从之前的值开始。

示例： 如果我输入10，则动画从0开始，然后转到10。如果我然后将10更改为8，我希望动画再次从10转到8而不是从0转到8 。基本上，它应该从输入的先前值增加或减少！

其他人认为，如果我输入一些浮点数，例如0.10，它显示1，我希望它显示确切的值。

由于

＆＃13;

/*numbers values*/
$('.num').bind('change paste keyup', function() {
  var v1 = $(this).val();
  $('.price').html(v1);
  animatePrince();
});


/*numbers animation*/
function animatePrince() {
  $('.price').each(function() {
    $(this).prop('Counter', $(this).val()).animate({
      Counter: jQuery(this).text()
    }, {
      duration: 1000,
      easing: 'swing',
      step: function(now) {
        jQuery(this).text(Math.ceil(now));
      }
    });
  });
}

＆＃13;

.s1 {
  display: block;
}

.s2 {
  display: block;
  margin-bottom: 25px;
}

.num {
  display: block;
  margin-bottom: 30px;
  border: 1px solid #333;
  padding: 20px;
}

.price {
  border: 1px solid #222;
  padding: 10px 30px;
  padding: 20px 90px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="s1">Input</span>
<input class="num" type="float" value="1">
<span class="s2">Result</span>
<span class="price"></span>

＆＃13;

Answer 1

我建议你将jQuery部分更新为下面提到的代码：

function isFloat(n){
    return Number(n) === n && n % 1 !== 0;
}

function isInt(n){
    return Number(n) === n && n % 1 === 0;
}

/*numbers values*/
$('.num').bind('change paste keyup', function(){
    var value = $(this).val();
  if(isInt(parseFloat(value)))
  {
    animatePrinceInt(parseInt(value));
  }
  else {
    animatePrinceFloat(parseFloat(value));
  }
});

/*numbers animation*/
function animatePrinceFloat(value) {
$('.price').val(value);

$({countNum1: $('.price').text()})
  .animate({countNum1: value }, {
  duration: 3000,
  easing:'linear',
  step: function() {
    var nn= this.countNum1;
    $('.price').text(parseFloat(nn).toFixed(2));
  },
  complete: function() {
    var nn= this.countNum1;
    $('.price').text(parseFloat(nn).toFixed(2));
  }
});

}

/*numbers animation*/
function animatePrinceInt(value) {
$('.price').val(value);

$({countNum: $('.price').text()})
  .animate({countNum: value}, {
  duration: 3000,
  easing:'linear',
  step: function() {
    var nn= this.countNum;
    $('.price').text(Math.floor(nn));
  },
  complete: function() {
    var nn= this.countNum;
    $('.price').text(Math.floor(nn));
  }
});

}

请更新duration的值。我用它作为3000来看动画。

Answer 2

我在小提琴上做了一些改变。工作正常。

脚本：

$('.num').on('change', function() {
    var v1 = $(this).val();
    animatePrince();
});


/*numbers animation*/
function animatePrince() {
    var target = parseFloat($('.prince').val());
    var number = parseFloat($('.num').val());
    console.log(number + "  " + target + " " + (number > target));
    if (number > target) {
        var interval = setInterval(function() {
            $('.prince').val(target.toFixed(1));
            if (number <= target) clearInterval(interval);
            target = parseFloat(target + 0.1)
        }, 30);
    } else {
        var interval = setInterval(function() {
            $('.prince').val(target.toFixed(1));
            if (number >= target) clearInterval(interval);
            target = parseFloat(target - 0.1)
        }, 30);
    }
}

HTML：

<span class="s1">Input</span>
<input class="num" type="float" value="1">
<span class="s2">Result</span>
<input class="prince" type="float" value="1">

的CSS：

.s1 {
    display: block; }

.s2 {
    display: block;
    margin-bottom: 25px; }

.num, .prince {
    display: block;
    margin-bottom: 30px;
    border: 1px solid #333;
    padding: 20px; }

JSfiddle Demo

通过递增和递减来设置动画数字

2 个答案: