调整速度和jQuery的动画气泡的位置

Question

我张贴了关于另一个脚本，我想，而不是用这个的另一个问题，但没有人能帮助，所以我决定尝试并获得这个工作，我怎么想。我已阅读了与此主题有关的其他一些问题，但我无法弄清楚如何将这些解决方案应用到我正在使用的脚本中。

我想保持气泡加快，并在屏幕的几秒钟后上得到聚集在一起。我已经能够通过调整rand和horiSpeed来减缓气泡的初始速度，但它并没有解决随后的加速或聚集问题。

我也是在使用setInterval发挥各地，但没有运气有两种。如果有人能指出我正确的方向，并解释不同的功能在做什么，我将不胜感激。我特别在下面的部分15和250困惑：

marginLeft: function (n, v) { 
       return (Math.sin(new Date().getTime()/(horiSpeed * 15000) + rand) + 1) * parentW; 
      } 
     }); 
    }, 15); 

    setInterval(function() { 
     if (parseFloat(current.css('margin-top')) < -thisH) { 
      current.css('margin-top', windowH + thisH); 
     } 
    }, 250); 

脚本如下，这里是我的小提琴：http://jsfiddle.net/N63Tf/5/

 jQuery.fn.verticalMarquee = function (vertSpeed, horiSpeed, index) { 

    this.css('float', 'left'); 

    vertSpeed = vertSpeed || 1; 
    horiSpeed = 1/horiSpeed || 1; 

    var windowH = this.parent().height(), 
     thisH = this.height(), 
     parentW = (this.parent().width() - this.width())/2, 
     rand = Math.random() * (index * 10000),    
     current = this; 

    this.css('margin-top', windowH + thisH); 
    this.parent().css('overflow', 'hidden'); 

    setInterval(function() { 
     current.css({ 
      marginTop: function (n, v) { 
       return parseFloat(v) - vertSpeed; 
      }, 
      marginLeft: function (n, v) { 
       return (Math.sin(new Date().getTime()/(horiSpeed * 15000) + rand) + 1) * parentW; 
      } 
     }); 
    }, 15); 

    setInterval(function() { 
     if (parseFloat(current.css('margin-top')) < -thisH) { 
      current.css('margin-top', windowH + thisH); 
     } 
    }, 250); 


}; 
var message = 1; 
$('.message').each(function (message) { 
    $(this).verticalMarquee(1, 1, message); 
    message++; 
}); 

在此先感谢。

---

编辑：有关安东答案中的函数的问题。 （太长的评论和不知道还有什么地方把它。）

当你提到做所有的动画在一个循环，你的意思是该脚本可以改进的话，或者如果我想添加更多的转换，我应该把它们保留在这个脚本的函数中？

如果是后者，在代码中就新的转型走？我会创建另一个函数并将其放在animationStep之后吗？

是函数的反一部分，每个过渡将有自己的？ （在我看来，只会有一个计数器，否则每次转换会产生不同的泡沫呢？）

在柜台上，我是正确的，这部分是检查#parent的限制，以气泡停留在专区内，并在每第10次泡沫之后这样做？

if(check && item.y < -item.elementHeight){ //check bounds every 10th iteration 

最后，这是干什么的？它是否调用整个函数并设置间隔时间？这是我可以加快泡沫产生的速度吗？

window.requestAnimationFrame = (function(){ 
    return window.requestAnimationFrame  || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     function(callback){ 
     window.setTimeout(callback, 1000/60); 
     }; 
    })(); 

再次感谢您的帮助！

Answer 1

的随机行为来自使用浮动的div。浏览器试图摆脱它们并失败，因为你不断地改变边界。

为15ms的间隔中的第一循环，如果它到达页面的顶部移动项，第二个检查。

我添加了一些延迟到每个项目（有点超时）基于其索引，以防止它们聚集起来。

制作动画的一般提示：

1. 尝试做所有的动画在一个循环中（所以你不要有多个间隔运行）
2. 看看流畅的动画与requestAnimationFrame功能60fps
3. 要获得更多表现，您还可以使用css translate而不是边距来制作动画效果。

我添加了一点延迟，以防止项目混乱起来。 这是你的工作件：

jQuery.fn.verticalMarquee = function (vertSpeed, horiSpeed, index) { 

    this.css('position', 'absolute'); 

    vertSpeed = vertSpeed || 1; 
    horiSpeed = 1/horiSpeed || 1; 

    var windowH = this.parent().height(), 
     thisH = this.height(), 
     delay= (Math.random()/2+0.5)*3000*index, 
     parentW = (this.parent().width() - this.width())/2, 
     rand = Math.random() * (index * 10000), 
     current = this; 

    this.css('margin-top', windowH + thisH); 
    this.parent().css('overflow', 'hidden'); 

    setTimeout(function(){ 

     setInterval(function() { 
      current.css({ 
       marginTop: function (n, v) { 
        return parseFloat(v) - vertSpeed; 
       }, 
       marginLeft: function (n, v) { 
        return (Math.sin(new Date().getTime()/(horiSpeed * 15000) + rand) + 1) * parentW; 
       } 
      }); 
     }, 15); 

     setInterval(function() { 
      if (parseFloat(current.css('margin-top')) < -thisH) { 
       current.css('margin-top', windowH + thisH); 
      } 
     }, 250); 
    }, delay); 

    }; 

    $('.message').each(function (index) { 
     $(this).verticalMarquee(1, 1, index); 
    }); 

http://jsfiddle.net/QqMu4/

，这就是它的外观与所有我已经说过了应用的东西：

http://jsfiddle.net/Arimano/549Pa/