Question

我的目标是使用不同的持续时间值为两组数字设置动画，而不重复代码。我怎样才能做到这一点？ Jquery的：

child(X) :-
    person(FirstName, LastName, DOB, Status),
    X = person(FirstName, LastName, DOB, Status).

HTML：

  $('.counter').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
  duration: 5000,
  easing: 'swing',
  step: function () {
  $this.text(Math.ceil(this.Counter));
   }
  });      
});

我可以通过更改数字＆＃34; 1971＆＃34;的类名来实现这一点，但之后我会重复代码......有人可以给我一个提示吗？

Answer 1

另一个稍微不同的解决方案是将数据标签分配给您的计数器并以此方式控制您的计时。

<div class="counter" data-time="3000"><p>1971</p></div>

<div class="counter" data-time="4000"><p>2017</p></div>

<小时/> 然后在现有函数中使用对数据标记值的调用替换持续时间值。

$('.counter').each(function () {
  var $this = $(this);
  var duration = $(this).data('time');

  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: duration,
    easing: 'swing',
    step: function () {
      $this.text(Math.ceil(this.Counter));
    }
  });      
});

Here is a working example for you

Answer 2

获取您拥有的代码，将其放在接受参数的函数中。

在下面的情况中，我使函数接受sel（css选择器）和duration值。您也可以根据需要添加其他值。

为了简单起见，我还在你的html中添加了类，以便我们可以单独解决每个问题。

＆＃13;

// Call the animation on the first item with a 1 second duration
animateNumber('.first-counter', 1000);
// Call the animation on the second item with a 5 second duration
animateNumber('.second-counter', 5000);

/**
 * Animate a numeric increment
 * 
 * @param {string} sel - the CSS selector of the element to animate
 * @param {int} duration - the number of milliseconds
 */
function animateNumber(sel, duration) {
    $(sel).each(function() {
      var $this = $(this);
      jQuery({
        Counter: 0
      }).animate({
        Counter: $this.text()
      }, {
        duration: duration,
        easing: 'swing',
        step: function() {
          $this.text(Math.ceil(this.Counter));
        }
      });
    });
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="counter first-counter">
  <p>2017</p>
</div>

<div class="counter second-counter">
  <p>1971</p>
</div>

＆＃13;

Jquery：如何在不重复代码的情况下为两组具有不同持续时间的数字设置动画？

2 个答案: