使用 math.random() 在 jquery 中为 div 设置动画；答案

【问题标题】：Animating a div in jquery using math.random();使用 math.random() 在 jquery 中为 div 设置动画；
【发布时间】：2014-12-11 11:25:07
【问题描述】：

我目前正在做一个项目，该项目必须通过手动数据输入来更新圆圈内 div（绿色）的高度。

这是我正在谈论的圈子的一个jsfiddle：http://jsfiddle.net/bphs5k8v/

我需要做的是每隔几秒钟将绿色移动到圆圈内的随机高度（用于测试目的）。但老实说，我不知道如何做到这一点。我能够使用 CSS 动画成功地做到这一点，但我认为无论如何我都需要使用 javascript 作为项目的结果。

//HTML
<div class="circle">
        <div id="animateddiv1">
    </div>  
</div>

//CSS
.circle {border-radius: 50%; position: relative; overflow: hidden; background: #8a8a8a; width: 165px; height: 165px; display: inline-block; margin: 0 75px; box-shadow: 0px 4px 2px #191919;}
#animateddiv1 {background: #63B23A; position: absolute; top: 130px; width: 200px; height: 165px;}

我寻求你的帮助！谢谢 :D

【问题讨论】：

试试 jQuery animate()。这是给你的例子Fiddle。
使用这些 CSS 属性，您必须更改 #animateddiv1 ` top CSS 属性

标签： javascript jquery html css random

【解决方案1】：

正如您在问题中所述，您可以在 CSS 中使用关键帧，但很难将这些数字随机化，并且您受限于放入多少个不同的关键帧。

一个简单的 JS 版本是运行一个 setInterval 函数，该函数随机生成一个 0 到 165px 之间的数字，然后将其推送到 css 中，改变 top 的位置。

类似这样的：

$(document).ready(function() {
  setInterval(function() {
    var rand = Math.floor((Math.random() * 165));
    $('#animateddiv1').css('top', rand);
  }, 2000);
});

.circle {
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: #8a8a8a;
  width: 165px;
  height: 165px;
  display: inline-block;
  margin: 0 75px;
  box-shadow: 0px 4px 2px #191919;
}
#animateddiv1 {
  background: #63B23A;
  position: absolute;
  top: 20px;
  width: 200px;
  height: 165px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="circle">
  <div id="animateddiv1">
  </div>
</div>

然后您可以根据自己的喜好改进此代码，也许通过数字等使其具有动画效果。

【讨论】：

太棒了，非常感谢！我也在寻找一个平稳的过渡，但其他一些用户已经建议:-)

【解决方案2】：

将内部 Div 定位到底部并通过 Jquery 更改 Timeout 时的高度值

jQuery

window.setInterval(function(){
value = Math.floor((Math.random() * 100) + 1);
    $("#animateddiv1").css('height',value)
}, 1000);

CSS

.circle {border-radius: 50%; position: relative; overflow: hidden; background: #8a8a8a; width: 165px; height: 165px; display: inline-block; margin: 0 75px; box-shadow: 0px 4px 2px #191919;}

#animateddiv1 {background: #63B23A; position: absolute; bottom:0; width: 200px; height: 165px;}

Fiddle

【讨论】：

【解决方案3】：

我推荐你阅读 jQuery 文档http://api.jquery.com/animate/

这里是平滑动画的例子： http://jsfiddle.net/bphs5k8v/8/

$(function () {
    var animated = $('#animateddiv1');

    function animate() {
        animated.animate({
            height: Math.floor(Math.random() * 100) + '%'
        }, 350);
    }

    setInterval(animate, 350);
})

【讨论】：

【解决方案4】：

你可以试试这个：使用setInterval 得到你想要的。

setInterval(function(){
    $('#animateddiv1').animate({top:Math.floor(Math.random() *180 +5)})
},1000);

.circle {border-radius: 50%; position: relative; overflow: hidden; background: #8a8a8a; width: 165px; height: 165px; display: inline-block; margin: 0 75px; box-shadow: 0px 4px 2px #191919;}
#animateddiv1 {background: #63B23A; position: absolute; top: 130px; width: 200px; height: 165px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
        <div id="animateddiv1">
    </div>  
</div>

【讨论】：