📅 最后修改于: 2023-12-03 15:32:11.362000 🧑 作者: Mango
jQuery是一个非常流行的JavaScript库，它提供了许多易于使用的API来简化开发人员的任务。而jQuery UI是一个基于jQuery的用户界面框架，它提供了各种UI组件和效果，使得开发人员能够更加快速地构建富有交互性的Web应用程序。
抖动效果是jQuery UI中的一种效果，当元素被触发时，它会在一定的时间内抖动若干次。常见的应用场景是验证表单输入是否正确或者提示用户注意事项。
在使用jQuery UI抖动效果之前，需要先引入jQuery和jQuery UI的脚本文件。然后，可以通过effect()方法来调用抖动效果，这个方法需要传入一个对象来指定抖动的参数，例如：
$( "#myElement" ).effect( "shake", {times:3}, 500 );
在这个例子中，#myElement是要进行抖动的元素的ID，shake表示要使用的效果类型，{times:3}指定抖动的次数，500表示动画的持续时间。
direction：抖动的方向，可以是"up"、"down"、"left"或"right"，默认值为"left"。
distance：抖动的距离，可以是任何合法的CSS长度单位，例如"10px"或"2em"，默认值为"20"。
times：抖动的次数，默认值为3。
duration：动画的持续时间，以毫秒为单位，默认值为300。
在调用effect()方法时，还可以传入回调函数以在动画完成后执行额外的操作。例如：
$( "#myElement" ).effect( "shake", {times:3}, 500, function() {
// 动画完成后要执行的代码
});
下面是一个示例，展示了如何使用jQuery UI抖动效果来验证表单输入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 抖动效果示例</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
input[type="text"] {
width: 300px;
padding: 5px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
.error {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<form>
<label for="username">用户名：</label>
<input type="text" id="username">
<span class="error">请输入用户名</span>
<br><br>
<label for="password">密 码：</label>
<input type="text" id="password">
<span class="error">请输入密码</span>
<br><br>
<input type="submit" value="登录">
</form>
<script>
$(function() {
$("form").submit(function(event) {
var username = $("#username").val().trim();
var password = $("#password").val().trim();
if(username === "") {
$(".error").eq(0).effect("shake", {times:3}, 500);
event.preventDefault();
}
if(password === "") {
$(".error").eq(1).effect("shake", {times:3}, 500);
event.preventDefault();
}
});
});
</script>
</body>
</html>
在这个示例中，我们定义了一个表单，然后通过jQuery监听提交事件。在表单中，我们为每个输入框都设置了一个错误提示信息，当用户提交表单时，我们检查输入框是否为空，如果为空则通过.effect()方法来触发抖动效果。