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

我发布了另一个关于我想要使用的另一个脚本而不是这个脚本的问题，但是没有人能够提供帮助，所以我决定试着让这个按照我喜欢的方式工作。 我已经阅读了一些与此主题相关的其他问题，但我无法弄清楚如何将这些解决方案应用于我正在使用的脚本。

几秒后，我想保持气泡加速并在屏幕顶​​部聚集在一起。 我已经能够通过调整rand和horiSpeed来减慢气泡的初始速度，但它没有修复随后的加速或结块。

我也玩过SetInterval，但也没有运气。 如果有人能指出我正确的方向，并解释不同的function正在做什么，我将不胜感激。 我对以下部分中的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++; }); 

提前致谢。

---

编辑：关于安东答案中的function的问题。 （评论太长了，不知道还能把它放在哪里。）

当你提到在一个循环中完成所有动画时，你的意思是这个脚本可以改进这样做，或者如果我想添加更多过渡，我应该将它们保存在这个脚本的函数中吗？

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

计数器是函数的一部分，每个转换都有自己的吗？ （在我看来，只有一个计数器，否则每个过渡都会产生单独的气泡？）

在柜台中，我是否更正，这部分是检查#parent的界限，所以气泡保持在div内，并在每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。 浏览器尝试将它们排除并失败，因为您不断更改边距。

第一个循环间隔15毫秒移动项目，第二个循环检查它是否到达页面顶部。

我根据其索引为每个项目添加了一些延迟（稍微超时），以防止它们聚集起来。

一些动画的一般提示：

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/