在jQuery中弹跳球，摆或任何其他时间增量加法系统？

enter image description here 在jQuery中弹跳球，摆或任何其他时间增量加法系统？

拼图

我不明白为什么功能+=结果有点振荡-pattern。我预计振荡格局需要改变加号的标志，但是不会。我预计东西像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 
        ); 
    };

附： ...快速测试下面的东西，请使用$ mkdir scripts; cd scripts; wget http://code.jquery.com/jquery-1.7.2.min.js。

来源

2012-06-02 hhh

http://jsfiddle.net/aepmc/我没有看到那里的宽度与摆动行为，只是与高度，这是因为* height：toggle * –

@guido：那么执行增量加法的命令是什么？我更新了q更加清晰。是的，如果我可以解决任何问题，例如摆锤，弹跳球等 - 我认为我已经用时间增量加法解决了问题。澄清q。 – hhh

不使用setInterval（）？ –

这可有得开始：

<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() ）
如果你使用动画，或者像这样的任何函数，我认为你应该只依赖它并保持“高于”它;或者你的风险最终会干扰或混乱的事件队列（你的和内置的）

来源

2012-06-02 06:45:12

...如果我可以理解振荡已完成，以便执行与生成命令中的回调相同的代码或者我误会了吗？现在，这显然是你所说的Callback -queue或？ – hhh

通过回调我的意思是通过'setInterval（）';每10毫秒重复运行一次的函数。它是纯javascript，只有使用jQuery才能用css（）设置球位置。 jquery'animate（）'几乎完全相同，添加了一些更多的功能（例如，您可以排列动画，使用预定义的效果（缓动）等等）。 –

在jQuery中弹跳球，摆或任何其他时间增量加法系统？

回答

相关问题