jquery动画效果代码

以下是一个简单的 jQuery 动画效果代码示例：

HTML 代码：

<div class="box"></div>

CSS 代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

jQuery 代码：

$(document).ready(function() {
  $(".box").click(function() {
    $(this).animate({
      width: "200px",
      height: "200px",
      opacity: 0.5
    }, 1000);
  });
});

解释：

$(document).ready(function() {...});：当文档加载完成后执行的函数。

$(".box").click(function() {...});：当 .box 元素被点击时执行的函数。

$(this).animate({...}, 1000);：将当前元素（即 .box）的宽度、高度和不透明度动画变化到指定的值，动画时间为 1000 毫秒（即 1 秒）。

这个示例中的动画效果是当用户点击 .box 元素时，它会变成一个更大、更透明的红色方块。

下面再给出一些常见的 jQuery 动画效果代码示例：

淡入淡出效果：

HTML 代码：

<div class="box"></div>

CSS 代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

jQuery 代码：

$(document).ready(function() {
  $(".box").click(function() {
    $(this).fadeOut(1000).fadeIn(1000);
  });
});

解释：

$(this).fadeOut(1000)：将当前元素（即 .box）淡出，动画时间为 1000 毫秒。

.fadeIn(1000)：将当前元素淡入，动画时间为 1000 毫秒。

这个示例中的动画效果是当用户点击 .box 元素时，它会淡出再淡入。

滑动效果：

HTML 代码：

<div class="box"></div>

CSS 代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

jQuery 代码：

$(document).ready(function() {
  $(".box").click(function() {
    $(this).slideUp(1000).slideDown(1000);
  });
});

解释：

$(this).slideUp(1000)：将当前元素向上滑动消失，动画时间为 1000 毫秒。

.slideDown(1000)：将当前元素向下滑动出现，动画时间为 1000 毫秒。

这个示例中的动画效果是当用户点击 .box 元素时，它会向上滑动消失再向下滑动出现。

转换效果：

HTML 代码：

<div class="box"></div>

CSS 代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

jQuery 代码：

$(document).ready(function() {
  $(".box").click(function() {
    $(this).animate({
      borderRadius: "50%",
      backgroundColor: "blue"
    }, 1000);
  });
});

解释：

$(this).animate({...}, 1000)：将当前元素的 border-radius 和 background-color 属性动画变化到指定的值，动画时间为 1000 毫秒。

这个示例中的动画效果是当用户点击 .box 元素时，它会变成一个圆形的蓝色元素。