Question

我有以下功能，可以激活一系列条形图：

function fluctuate(bar) {
  var height = Math.floor(Math.random() * 30) + 5;
    //Animate the equalizer bar repeatedly
    bar.animate({
      height: height
    }, 250, function() {
      fluctuate($(this));
    });
  }

  $(".bar").each(function(i) {
    fluctuate($(this));
  });

我想在每次点击div类（“。play”）时播放。如何启用此功能，并在停止之前将动画限制为3秒？

由于

Answer 1

要仅运行动画三秒钟，计算它已运行的次数，并使用动画速度多次计算动画长度的总和：

function fluctuate(bar) {
  var height = Math.floor(Math.random() * 30) + 5;
  bar.animate({
      height: height
  }, 250, function() {
      var times = $(this).data('times') || 0;
      if (times <= 12) {
          $(this).data('times', ++times);
          fluctuate($(this));
      }else{
          $(this).data('times', 0);
      }
  });
}

$(".bar").each(function(i) {
    fluctuate($(this));
});

FIDDLE

一个更好的版本作为带参数的插件：

$.fn.fluctuate = function(speed, duration) {
    return this.each(function() {
        var self = this,
            times = Math.round(duration / speed),
            iteration = 0;

        (function ani() {
            var height = Math.floor(Math.random() * 30) + 5;
            $(self).animate({ height: height }, speed, function() {
                if (iteration <= times) {
                  iteration++;
                  ani();
                }
            });
        })();
    });
}

$('#test').on('click', function() {
    $(".bar").fluctuate(250, 3000);
});

FIDDLE

如何延迟调用函数

1 个答案: