在前端开发中，我们经常需要实现一些动态效果来增强用户体验。其中抖动效果是一种非常常见的效果，它可以让页面元素在用户操作时呈现出晃动的效果，从而吸引用户的注意力。为了方便实现抖动效果，我们可以使用 npm 包 jquery-shake。
jquery-shake 介绍
jquery-shake 是一个基于 jQuery 类库的插件，可以快速为页面元素添加抖动效果，支持多种参数配置， API 简单易用。该插件可以应用于多种场景，如当用户填写表单时，如果用户未输入规范的内容，则可以通过抖动的方式提示用户。
安装
在使用 jquery-shake 插件前，首先需要在项目中安装 npm 包 jquery-shake。可以通过以下命令进行安装：
npm install jquery-shake --save
使用
安装完成后，我们需要在页面中引入 jquery-shake 插件：
<script src="jquery.min.js"></script> <script src="jquery-shake.min.js"></script>
接下来，我们可以使用以下方式在页面中添加抖动效果：
$("#btn").click(function(){
$("#box").shake({
direction: "left",
distance: 5,
times: 5,
duration: 100
});
});以上代码表示当我们点击 id 为 "btn" 的按钮时，对 id 为 "box" 的元素进行抖动效果，参数说明如下：
- direction：抖动的方向，可选值为 left、right、up、down，默认为 left。
- distance：抖动的距离，单位为像素，默认为 5。
- times：抖动的次数，默认为 5。
- duration：抖动的持续时间，单位为毫秒，默认为 100。
总结
通过本篇文章的介绍，我们了解了 jquery-shake 插件的使用方法。该插件可以快速实现抖动效果，且参数可配置，灵活性高。我们可以将该插件应用于多种场景，从而提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672481e8991b448e39d1