悬停时的jQuery文本动画“爆炸”效果[关闭]答案

【问题标题】：jQuery text animation "explosion" effect on hover [closed]悬停时的jQuery文本动画“爆炸”效果[关闭]
【发布时间】：2016-07-31 06:23:17
【问题描述】：

尝试使用简单的 jQuery 从下面的链接中复制这个令人敬畏的“鼠标悬停”效果：http://codecanyon.net/item/jquery-text-animation/full_screen_preview/233445

任何提示或提示？请参阅上面链接中的“鼠标悬停”部分。

【问题讨论】：

codecanyon 网站的功能在 chrome 中似乎可以正常工作。
效果很好！我在哪里可以买到呢？等等，你提供了链接！多么方便。谢谢。 -1
这个想法是在不购买的情况下了解它的工作原理......

标签： javascript jquery css animation text

【解决方案1】：

这是我写的一个简单的 jQuery 代码：

// jQuery explode text by Aziz Natour
// CC BY 4.0 License
// http://creativecommons.org/licenses/by/4.0/

$('.explodeMe').each(function() {
    var text = $(this).text();
    $(this).html(text.replace(/./g, "<span>$&</span>")); 
});
$('.explodeMe span').each(function() {
var min = -10, max = 10,
    min2 = -30, max2 = 30,
    random = Math.floor(Math.random() * (max - min + 1)) + min,
    random2 = Math.floor(Math.random() * (max2 - min2 + 1)) + min2,
    css = "top:"+random+"px; left:"+random2+"px",
    el = $(this);
    el.on({
        mouseenter: function () {
            el.attr("style", css);
        },
        mouseleave: function () {
            setTimeout(function() {
            	el.removeAttr("style");
            }, 300);
        }
    });
});

.explodeMe span {
  position: relative;
  transition: 0.3s .1s;
  top:0;left:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="explodeMe">I get nervous around cursors.</span>

Codepen 演示：http://codepen.io/azizn/full/redbRa

逻辑：

将每个文本字符包装在<span> 标签内
使新的 span 标签相对定位，以便在不影响布局流程的情况下操纵它们的位置。
在悬停时将随机 CSS 样式分别应用于每个跨度（用于动态移动）
延迟后移除样式

位置变化使用 CSS transition 属性进行动画处理。

【讨论】：

Aziz，这正是我想要的。非常感谢，我将继续涉足它。