Javascript 使单词震动jQuery

正如你在问题的标题中看到的那样，我有一项艰巨的任务

我正在做一个插件，可以让单词在屏幕上移动，通过锐化效果增大大小，通过模糊效果减小大小，最困难的是——一个方面是另一个方面，如果它们的名称相同，你可能会问：你是什么意思

他们有这种完全随机的行为来成长和保持焦点，变得更小和模糊，但是我需要让两个同名的单词永远不会同时变得清晰

我的插件的工作原理如下：

<span class="word" data-float="true" data-range-x="100" data-range-y="100" data-top="500" data-left="50" data-size="25">Love</span>

If data-float is true, the word is authorised to use the plugin
data-range-x = the maximum x range that can move
data-range-y = the maximum y range that can move
data-top = the top initial position
data-left = the left initial position
data-size = the size of the word

<h1 class="your-element">Hello!</h1>

$(document).ready(function () {
    $('.your-element').addClass('animated pulse');
});

爱情
爱
爱

您可能希望利用该库，因为它使用CSS3转换为具有脉冲、翻转、缩放、旋转、滚动、淡入淡出和其他效果的元素设置动画。然后可以使用jquery或纯javascript调用这些效果

下面是我制作的一个JSFIDLE，演示如何使用jQuery调用这个库中的效果

基本上，您的HTML可以如下所示：

<span class="word" data-float="true" data-range-x="100" data-range-y="100" data-top="500" data-left="50" data-size="25">Love</span>

If data-float is true, the word is authorised to use the plugin
data-range-x = the maximum x range that can move
data-range-y = the maximum y range that can move
data-top = the top initial position
data-left = the left initial position
data-size = the size of the word

<h1 class="your-element">Hello!</h1>

$(document).ready(function () {
    $('.your-element').addClass('animated pulse');
});

---

CSS动画将使这变得更容易/更简单。同意，但我需要支持IE8。@Amandaferari您可以在所有其他浏览器上始终使用CSS3。检测愚蠢的IE8并使其变得粗糙。但就他而言。因为你的（我想是你的…）代码完全是随机的，这意味着你永远不知道效果何时会结束（模糊或完全尖锐），至少现在不会，你应该实现一个函数，在将动画指定给元素之前，>将首先检查具有相同文本的所有其他元素>获取其结束动画时间并分别执行操作。我想对于已经做得很好的东西来说，这是太多的工作了。我的意思是，我认为在你做了你想做的事情之后，差异将不太明显…而且如果你考虑到（比如说）你有20多个元素说“爱”。。。见鬼，你打算怎么实现你想要的？还有什么比准确计算“是的，这是你相对于所有其他“爱”元素的正确时机”。。。