Question

我目前正在开发一个项目，该项目必须通过手动数据输入更新圆圈内的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

Answer 1

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

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

这样的事情：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

然后，您可以根据自己的喜好改进此代码，也可以通过数字等制作动画。

Answer 2

将内部Div放置到底部＆amp;通过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

Answer 3

我建议你阅读jQuery docs 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);
})

Answer 4

你可以试试这个：用setInterval来得到你想要的东西。

＆＃13;

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

＆＃13;

.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;}

＆＃13;

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

＆＃13;

使用math.random（）在jquery中设置div的动画;

4 个答案: