Question

enter image description here

拼图



我无法理解为什么函数+=会导致一点振荡 - 模式。我预计振荡模式需要改变   right: '+=50'添加的标志但没有。我期望   类似于100,150,200,250等等。但它似乎像移动一样   50,0,50,0,50,0，为什么？



如何使用+=50/log(time)创建一个振荡点？

试用1：尝试理解jQuery中的增量添加

<!DOCTYPE html>
<html>
<head>
  <style>
div { 
background-color:#bca; 
width:100px; 
border:1px solid green;
}
</style>
  <script src="scripts/jquery-1.7.2.min.js"></script>
</head>
<body>

<div id="clickme">
  Click here
</div>
<div    id='ball'
    style='width:100px; height:100px; position:relative; left:10px;'></div>

<script>
    // PASTE T2 or T3 from below.
</script>
</body>

试用2：按钮控制振荡，为什么0-50-0-50等？

    /*TODO: automatically trigger*/
    /*TODO: Traversing wave with 50/log(time)*/
    $('#clickme').click(function() {
      $('#ball').animate({
        opacity: 0.25,
        left: '+=50',  // I CANNOT UNDERSTAND THIS: functionality and how time?
        right: '+=50',
        height: 'toggle'
      }, 2000, function() {
        // Animation complete.
      });
    });

试用3：尝试使用setInterval立即使代码工作，不确定延迟但无论如何再次燃烧，即无法工作......使用以下

    while (true)
    {
            setInterval(
                    $('#ball').animate({
                          opacity: 0.25,
                          left: '+=50',
                          right: '+=50',
                          height: 'toggle'
                          }, 5000, function() {
                          // Animation complete.
                          }),
                    10000
                    );
    };

P.S。 ...要快速测试以下内容，请使用$ mkdir scripts; cd scripts; wget http://code.jquery.com/jquery-1.7.2.min.js。

Answer 1

这可以从以下开始：

<div id='ball' style='width:100px; height:100px; position:relative; top:0px; left:0px;'>                    
</div>
<script>
    var angle = -180;
    var left = 0;
    var topv = 0;
    function updatePos() {
       angle = angle + 2;
       left += Math.cos(angle/360*Math.PI);
       $('#ball').css('left',left);
       topv += Math.cos(angle/360*Math.PI);
       $('#ball').css('top',topv);    
    }
    setInterval('updatePos()',10);
</script>

我使用余弦而不是日志，因为你在询问振荡，你可以轻松地替换它。

编辑：在上一个示例中，您遇到了一些问题：

您不需要while循环，setInterval(callback,interval)会调用callback每interval毫秒（直到您停止使用clearInterval()）
如果您使用动画，或任何类似的功能，我认为您应该只依靠它并保持“高于”它;或者你最终会干扰或搞乱事件队列（你的和内置队列）

在jQuery中弹跳球，摆锤或任何其他Timewise-Incremental-addition系统？

1 个答案: