jquery实现动画效果实例

以下是一个使用 jQuery 实现动画效果的例子：

HTML 代码：

<div id="box"></div>
<button id="btn">点击</button>

CSS 代码：

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  left: 0;
  top: 0;
}

jQuery 代码：

$(document).ready(function() {
  $('#btn').click(function() {
    $('#box').animate({
      left: '+=100px',
      top: '+=100px'
    }, 1000);
  });
});

解释：

当按钮被点击时，jQuery 会选择 `#box` 元素并调用 `animate()` 方法。在 `animate()` 方法中，我们定义了要执行的动画效果，这里是将 `#box` 元素向右和向下移动 100 像素，一共需要 1 秒钟的时间完成动画效果。

通过这个例子，我们可以看到 jQuery 的 `animate()` 方法可以轻松地实现动画效果，并且可以设置动画的时间、速度、缓动方式等参数。