在 jQuery 中，您可以使用 animate() 方法来创建自定义动画效果。

1. animate() 方法：

animate() 方法允许您对元素的 CSS 属性进行动画处理。

语法：

$(selector).animate({params}, speed, callback);
  • params：一个对象，包含要应用动画的 CSS 属性及其目标值。
  • speed（可选）：动画持续时间，可以是 "slow"、"fast" 或以毫秒为单位的数值。
  • callback（可选）：动画完成后执行的回调函数。

示例：

$("button").click(function() {
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
});

在上述示例中，点击按钮时，div 元素会同时执行多个动画效果，包括：

  • 将 left 属性设置为 250px，使元素向右移动。
  • 将 opacity 属性设置为 0.5，使元素半透明。
  • 将 height 和 width 属性分别设置为 150px，调整元素的大小。

2. 使用相对值：

您还可以使用相对值来定义动画效果，即相对于元素当前的值进行动画。

示例：

$("button").click(function() {
  $("div").animate({
    left: '+=250px',
    height: '+=150px',
    width: '+=150px'
  });
});

在上述示例中，div 元素会在当前基础上，向右移动 250px，高度和宽度分别增加 150px。

3. 使用预定义值：

animate() 方法还支持使用预定义的值，如 "show"、"hide" 或 "toggle"。

示例：

$("button").click(function() {
  $("div").animate({
    height: 'toggle'
  });
});

在上述示例中，div 元素的高度会在显示和隐藏之间切换。

4. 动画队列：

jQuery 提供了动画队列功能，允许您在多个动画之间创建队列，逐一执行。

示例：

$("button").click(function() {
  $("div")
    .animate({ left: '250px' })
    .animate({ opacity: '0.5' })
    .animate({ height: '150px' })
    .animate({ width: '150px' });
});

在上述示例中，div 元素的动画会依次执行，每个动画完成后，才会执行下一个动画。

更多关于 jQuery 动画的详细信息，请参考 菜鸟教程。