jQuery文本摇动效果插件

演示  website 下载

介绍

一个超轻量级的jQuery插件，它利用CSS3转换和过渡对文档中的任何DOM元素实现平滑的抖动动画。

兼容的浏览器

Chrome, IE9+, FireFox, Opera, Safari

使用方法

1. 在jQuery库之后加载shake.js插件。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/shake.js"></script>

2. 将函数shake功能应用于要设置动画的元素。

<div id="shake">
  Shake Me!
</div>
$(function(){
  $('#shake').shake()
});

3.用于摇动动画的jQuery脚本。随意修改和覆盖代码以创建自己的摇动动画。

$.fn.shake = function(interval = 100){
    this.addClass('shaking');
    this.css('transition', 'all ' + (interval / 100).toString() + 's');
    setTimeout(() => {
        this.css('transform', 'translateX(-50%)');
    }, interval * 0);
    setTimeout(() => {
        this.css('transform', 'translateX(50%)');
    }, interval * 1);
    setTimeout(() => {
        this.css('transform', 'translateX(-25%)');
    }, interval * 2);
    setTimeout(() => {
        this.css('transform', 'translateX(25%)');
    }, interval * 3);
    setTimeout(() => {
        this.css('transform', 'translateX(-7%)');
    }, interval * 4);
    setTimeout(() => {
        this.css('transform', 'translateX(0%)');
    }, interval * 5);
    this.removeClass('shaking');
};