实现jquery抖动动画
概述
本文将教你如何使用jquery实现抖动动画效果。抖动动画是一种常见的用户界面交互效果，可以为网页增加一些活力和趣味性。
实现步骤
| 步骤 | 说明 |
|---|---|
| 1 | 创建一个HTML页面 |
| 2 | 引入jquery库 |
| 3 | 编写HTML元素 |
| 4 | 编写CSS样式 |
| 5 | 编写javascript代码实现抖动动画 |
详细步骤
步骤1：创建一个HTML页面
首先，你需要创建一个HTML页面，用来展示抖动动画效果。可以按照以下代码创建一个简单的HTML页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抖动动画示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box"></div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
步骤2：引入jquery库
在HTML页面的头部，通过<script>标签引入jquery库文件。可以通过以下代码引入jquery库：
<script src="jquery.min.js"></script>
步骤3：编写HTML元素
在body标签中，创建一个用于展示抖动动画效果的HTML元素。可以使用一个<div>元素作为示例：
<div id="box"></div>
步骤4：编写CSS样式
在HTML页面的head标签中，创建一个style标签，并为抖动动画的目标元素添加样式。可以按照以下代码添加样式：
<style>
#box {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
步骤5：编写javascript代码实现抖动动画
在HTML页面的body标签之前，创建一个script标签，并编写javascript代码实现抖动动画效果。可以按照以下代码编写javascript代码：
<script>
$(document).ready(function(){
// 定义抖动动画函数
function shake() {
// 抖动元素
$("#box").animate({
left: '10px'
}, 50).animate({
left: '-10px'
}, 50).animate({
left: '0'
}, 50);
}
// 调用抖动动画函数
shake();
});
</script>
上述代码中，我们首先使用$(document).ready()方法，确保在页面加载完毕后再执行后续操作。然后定义了一个名为shake()的函数，该函数用于实现抖动动画效果。接着，在函数中使用$("#box").animate()方法来实现元素的抖动效果。通过连续调用三次animate()方法，分别将元素向左移动10px，向右移动10px，再回到原来的位置。最后，在页面加载完成后，调用shake()函数来触发抖动动画。
完整代码
HTML代码（index.html）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抖动动画示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box"></div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS代码（style.css）：
#box {
width: 100px;
height: 100px;
background-color: blue;
}
Javascript代码（script.js）：
$(document).ready(function(){
// 定义抖动动画函数
function shake() {
// 抖动元素
$("#box").animate({
left: '10px'
}, 50).animate({
left: '-10px'
}, 50).animate({
left: '0'
}, 50);
}
// 调用抖动动画函数
shake();
});
总结
通过以上步骤，你可以使用jquery实现一个简单的抖动动画效
标签：jquery,动画,抖动,代码,HTML,animate From： https://blog.51cto.com/u_16175436/6784730