jqurey中的animate方法

最新推荐文章于 2023-12-18 10:35:42 发布

迷失的风景web

最新推荐文章于 2023-12-18 10:35:42 发布

阅读量275

点赞数

本文链接：https://blog.csdn.net/qq_44193048/article/details/106319717

版权

在原生js里面并没有提供动画方法，如果要实现，必须结合定时器来实现一些动画，但是jQuery就给我们提供了一些实现动画的方法。列如：animate方法。
下面我来对这个方法谈一下自己的一些理解。
animate方法，用于创建自定义动画的函数。
语法：animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
列子：
通过animate改变盒子的高度：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .list {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="list"></div>
    <button>改变前</button>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
      $("button").click(function () {
        $(".list").animate({ height: "300px" }, 3000,function(){
            $("button").text("改变后");
        });
      });
    </script>
  </body>
</html>

改变之前
在这里插入图片描述
改变之后

也可以同时改变他的多个样式

 <script>
      $("button").click(function () {
        $(".list").animate({
             height: "300px",
             width:"300px",
             top:"150px",
             left:"150px",
        
        }, 3000,function(){
            $("button").text("改变后")
        });
      });
    </script>

改变之前：
在这里插入图片描述
改变之后：

也可以实现一些值的累加

<script>
      $("button").click(function () {
        $(".list").animate({
             height: "+=100px",
             width:"+=100px",
             top:"+=50px",
             left:"+=50px",
        
        }, 3000,function(){
            $("button").text("改变后")
        });
      });
    </script>

执行之前：
在这里插入图片描述
单击一次之后：

单击2次之后：

以此类推。。。

注意在animate能改变的只有以下属性：

backgroundPositionX
backgroundPositionY
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent

迷失的风景web

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jqurey中的animate方法

在原生js里面并没有提供动画方法，如果要实现，必须结合定时器来实现一些动画，但是jQuery就给我们提供了一些实现动画的方法。列如：animate方法。下面我来对这个方法谈一下自己的一些理解。animate方法，用于创建自定义动画的函数。语法：animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是动画完成后
复制链接

扫一扫