jQuery中使用animate自定义动画的方法

当我们在前端开发中需要实现网站的动态效果时，很多情况下需要使用动画效果，而jQuery中是提供了一个非常方便的动画库——animate，它能够轻松实现元素的自定义动画。下面是使用animate实现自定义动画的步骤：

步骤1：引入jQuery库

在html文档中引入jQuery库的代码如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

步骤2：选择元素并设置初始状态

使用jQuery选择器选择需要动画的元素，并且需要设置元素动画开始时的初始状态。

示例代码：

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

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50px;
  left: 50px;
}

$(function(){
    $('.box').css({
        'left' : '0',
        'top' : '0',
        'background-color' : 'green'
    });
})

步骤3：设置动画的目标状态

设置动画结束时元素动画达到的目标状态。

示例代码：

$(function(){
    $('.box').animate({
        'left' : '100px',
        'top' : '100px',
        'background-color' : 'blue',
        'width' : '150px',
        'height' : '150px'
    }, 2000, 'linear', function(){
        alert('动画执行完毕！');
    });
})

这里的animate方法有四个参数：

• 第一个参数是目标状态对象；
• 第二个参数是动画的持续时间，单位为毫秒；
• 第三个参数是动画的缓动方式，有"linear"、"easeIn"、"easeOut"、"easeInOut"等多种选择；
• 第四个参数是动画执行完毕后的回调函数。

示例2：实现图片的无限滚动动画

示例代码：

<div class="container">
    <div class="img-container">
      <img src="image1.jpg" />
      <img src="image2.jpg" />
      <img src="image3.jpg" />
      <img src="image4.jpg" />
      <img src="image5.jpg" />
      <img src="image6.jpg" />
    </div>
</div>

.container {
  width: 400px;
  height: 300px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ccc;
}

.img-container {
  position: absolute;
  left: 0;
  top: 0;
}

.img-container img {
  float: left;
  width: 400px;
  height: 300px;
}

$(function(){
    var imgWidth = $('.img-container img').width();
    var imgCount = $('.img-container img').length;
    var interval = 3000;
    var timer;
    $('.img-container').width(imgWidth * imgCount);
    var leftMargin = 0;
    function slide(){
        leftMargin -= imgWidth;
        $('.img-container').animate({
            marginLeft: leftMargin
        }, 1000, 'linear', function () {
            if (leftMargin < -imgWidth*(imgCount-1)) {
                leftMargin = 0;
                $('.img-container').css('marginLeft', 0);
            }
        });
    };
    timer = setInterval(slide, interval);
})

这段代码实现了图片的无限滚动。它首先获取图片的宽度和数量，然后设置图片容器div的宽度为宽度的累积和。slide函数调用.animate方法实现图片容器的滚动，最后再设置marginLeft的值，如果marginLeft值小于最后一张图片的负值，就重新把marginLeft设置为0，实现无限滚动的效果。最后再使用setInterval函数执行slide函数，实现定时滚动的效果。