jquery 风中摆动效果

基础概念

"风中摆动"效果通常指的是元素在页面上模拟风吹动的效果，使其左右轻微摆动。这种效果常用于增强用户界面的动态感和趣味性。

类型

CSS动画：通过CSS的@keyframes规则实现。
JavaScript/jQuery动画：通过编写脚本控制元素的样式变化。

应用场景

导航菜单：使导航菜单项在鼠标悬停时摆动，增加互动性。
装饰元素：用于装饰性的图标或图片，使其看起来更加生动。
通知提示：摆动的效果可以用于吸引用户注意到新的通知或消息。

实现示例（使用jQuery）

以下是一个简单的jQuery实现风中摆动效果的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>风中摆动效果</title>
<style>
  .swing {
    display: inline-block;
    margin: 20px;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  function swingAnimation(element) {
    element.animate({left: '+=10'}, 100)
           .animate({left: '-=20'}, 200)
           .animate({left: '+=10'}, 100)
           .animate({left: '0'}, 100, function() {
             swingAnimation(this);
           });
  }

  $('.swing').each(function() {
    swingAnimation($(this));
  });
});
</script>
</head>
<body>

<div class="swing">摆动的元素1</div>
<div class="swing">摆动的元素2</div>

</body>
</html>