jQuery中animate()方法用法实例

animate()方法概述

animate()方法是jQuery动画效果中比较常用的一种，它可以通过设置一系列的CSS属性值实现动画效果。常见的CSS属性值包括宽度、高度、字体大小、颜色等等。

animate()方法语法如下：

$(selector).animate({params},speed,callback);

animate()方法参数解释

selector：表示被选定的一个或多个元素。
params：表示一个或多个用于设置动画属性的对象。
speed：表示完成动画效果所需时间的毫秒数，也可以是 slow、normal 或 fast。
callback ：表示动画完成后所执行的函数名称。

animate()方法实例

示例1：利用animate()实现简单的滑动动画

下面的代码演示了如何使用animate()方法实现一个简单的滑动效果。HTML部分包含一个div元素，CSS设置了这个div元素的背景颜色、宽度和高度等CSS属性。div元素有两个按钮，点击按钮可以向上或向下滑动。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>animate()实例</title>
  <style type="text/css">
    #myDiv {
      margin: 50px auto;
      width: 200px;
      height: 200px;
      background-color: #ccc;
      text-align: center;
      line-height: 200px;
    }
  </style>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#upBtn").click(function(){
        $("#myDiv").animate({top:"-200px"}, "slow");
      });
      $("#downBtn").click(function(){
        $("#myDiv").animate({top:"0px"}, "slow");
      });
    });
  </script>
</head>
<body>
  <div id="myDiv">点击按钮滑动</div>
  <button id="upBtn">向上滑动</button>
  <button id="downBtn">向下滑动</button>
</body>
</html>

解释：当点击向上滑动按钮(#upBtn)时，$("#myDiv").animate({top:"-200px"}, "slow")表示将myDiv元素的top属性从0px变为-200px，这样就实现了向上滑动。向下滑动同理。

示例2：利用animate()实现图片大小和透明度的变化

下面的代码演示了如何使用animate()方法实现图片的变化。HTML中包含两个图片元素，默认显示第一张图片。通过设置按钮的click事件，当点击fadeBtn按钮时，图片的透明度发生变化，当点击zoomBtn按钮时，图片的大小发生变化。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>animate()实例</title>
  <style type="text/css">
    #myImg1,#myImg2 {
      width: 500px;
      height: 300px;
      margin: 50px auto;
    }
  </style>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#fadeBtn").click(function(){
        $("#myImg1").animate({opacity:0.5}, "slow");
      });
      $("#zoomBtn").click(function(){
        $("#myImg1").animate({width:"+=200px", height:"+=120px"}, "slow");
      });
    });
  </script>
</head>
<body>
  <img id="myImg1" src="https://picsum.photos/500/300" alt="图片一">
  <img id="myImg2" src="https://picsum.photos/500/300" alt="图片二">
  <button id="fadeBtn">透明度变化</button>
  <button id="zoomBtn">大小变化</button>
</body>
</html>

解释：当点击透明度变化按钮(#fadeBtn)时，$("#myImg1").animate({opacity:0.5}, "slow")表示将myImg1元素的透明度从1变为0.5，这样就实现了图片的透明度变化效果；当点击大小变化按钮(#zoomBtn)时，$("#myImg1").animate({width:"+=200px", height:"+=120px"}, "slow")表示将myImg1元素的宽度和高度各增加200px和120px，这样就实现了图片的大小变化效果。

总结

animate()方法是jQuery中常用的动画效果实现方法，它可以实现多种CSS属性值的动态变化，并且API参数比较灵活，可以根据实际需求进行调整。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中animate()方法用法实例 - Python技术站

jQuery中animate()方法用法实例

jQuery中animate()方法用法实例

animate()方法概述

animate()方法参数解释

animate()方法实例

示例1：利用animate()实现简单的滑动动画

示例2：利用animate()实现图片大小和透明度的变化

总结

相关文章