0

我正在尝试使用 jquery 创建动画条形音箱（此处为 js fiddle：http: //jsfiddle.net/rhK4n/）

HTML

<div class="eq">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>

CSS

.bar {
    background-color: green;
    width:15px;
    height:40px;
    display: inline-block;
    vertical-align: bottom;
}

jQuery

function fluctuate(bar) {
    var hgt = Math.random() * 10;
    hgt += 1;
    var t = hgt * 30;

    bar.animate({
        height: hgt
    }, t, function() {
        fluctuate($(this));
    });
}

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

我希望条形音箱的高度为 40 像素。

但是，这种方法将它们收缩到 c.15px，因此基线上下移动，我希望它是固定的。

我无法弄清楚为什么会发生此错误。

4

3 回答 3

1

在您的原始代码中，您返回的高度是 [0,1) 范围内的整数，然后将值加 1。然后将值缩放 30。您应该返回范围 [0,40) 之间的随机整数，如下所示：

var amplitude = Math.floor(Math.random() * 40) + 1;

因此，您的代码可能如下所示：

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

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

或者，如果您需要浮点值，请使用：

var height = (Math.random() * (40.000)).toFixed(4)

编辑：这是一个正常运行的 jsFiddle，它展示了如何处理基线问题：http: //jsfiddle.net/3mhJJ/。此解决方案不需要您单独分隔每个均衡器条。

于 2013-11-12T18:35:33.853 回答
1

要阻止基线上下移动，您需要对 CSS 做一些不同的事情。可能有几种可能的解决方案，这里是一个。

http://jsfiddle.net/rhK4n/6/

基本上，CSS 总是从顶线与基线开始工作。但是使用绝对定位，您可以将条形音箱“下沉”到.eqdiv 的底部。然后，您必须将条形分开，但我认为这将使您的结果更接近您想要的。

于 2013-11-12T18:48:53.123 回答
1

这是一个没有javascript的例子，只有css。

请查看这支笔和 sass css：

$bars-number: 40; // this must reflect markup changes in html too
$bar-color: blue;

.animate-bars {
  display: flex;
  align-items: center;
  width: 300px;
  height: 40px;
  overflow: hidden;
  background-color: lighten($bar-color, 45%);

  div {
    flex: 1 0 auto;
    height: 100%;
    margin: 0 -2px;
    background-color: $bar-color;
    animation: animate-bar 300ms linear infinite alternate;
    transform-origin: bottom;
    opacity: 0;

    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }

    @for $i from 1 to $bars-number + 1 {
      &:nth-child(#{$i}) {
        animation-duration: (350 + random(450)) + ms;
        animation-delay: random(500) + ms;
      }
    }
  }
}

@keyframes animate-bar {
  0% {
    transform: scaleY(0);
    opacity: .8;
  }
  100% {
    transform: scaleY(100%);
    opacity: .4;
  }
}
于 2018-03-12T15:23:38.107 回答