1

在此处输入图像描述

拼图

  1. 我不明白为什么函数会+=导致有点振荡 - 模式。我预计振荡模式需要改变加法的符号，right: '+=50'但没有。我预计会有 100、150、200、250 等。但它看起来像 50,0,50,0,50,0 一样移动，为什么？

  2. 我怎样才能用类似的东西创建一个振荡点+=50/log(time)？

TRIAL 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>

TRIAL 2：控制振荡的按钮，为什么是0-50-0-50-etc？

    /*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
                    );
    };

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

4

1 回答 1

2

这可以从以下内容开始：

<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毫秒（直到你用 ot 停止clearInterval()）
  • 如果您使用动画或任何类似的功能，我认为您应该只依赖它并保持“高于”它；否则您可能最终会干扰或弄乱事件队列（您的和内置的）
于 2012-06-02T06:45:12.597 回答