jQuery animate动画

博主： literature
发布时间：2023 年 08 月 27 日
114 次浏览
关闭评论
2831字数
分类：主机教程

通过改变元素的高度，对元素应用动画：

$("button").click(function(){
    $("#box").animate({height:"300px"});
});

定义和用法
animate() 方法执行 CSS 属性集的自定义动画。

该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

提示：请使用 "+=" 或 "-=" 来创建相对动画。

语法
(selector).animate({styles},speed,easing,callback)

参数

styles

必需。规定产生动画效果的一个或多个 CSS 属性/值。
注意：当与 animate() 方法一起使用时，该属性名称必须是驼峰写法：您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。

可以应用动画的属性：

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

speed

可选。规定动画的速度。
可能的值：

毫秒
"slow"
"fast"

easing

可选。规定在动画的不同点中元素的速度。默认值是 "swing"。
可能的值：

"swing" - 在开头/结尾移动慢，在中间移动快
"linear" - 匀速移动

callback

可选。animate 函数执行完之后，要执行的函数。

实例:

最后修改：2023 年 08 月 27 日

© 允许规范转载

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

jQuery animate动画

literature • 2023 年 08 月 27 日

<p>通过改变元素的高度，对元素应用动画：</p><pre><code>$("button").click(function(){
    $("#box").animate({height:"300px"});
});
</code></pre><p>定义和用法<br />animate() 方法执行 CSS 属性集的自定义动画。</p><p>该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。</p><p>只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。</p><p>提示：请使用 "+=" 或 "-=" 来创建相对动画。</p><p>语法<br />(selector).animate({styles},speed,easing,callback)</p><p>参数<br /></p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f5b8929252fcceb7633c2f217cbe29ed8" aria-expanded="true"><div class="accordion-toggle"><span style="">styles</span><br />
<i class="pull-right fontello icon-fw fontello-angle-right"></i></div></div><div class="panel-body collapse-panel-body"><div id="collapse-f5b8929252fcceb7633c2f217cbe29ed8" class="collapse collapse-content"><p></p><p><br />必需。规定产生动画效果的一个或多个 CSS 属性/值。<br />注意： 当与 animate() 方法一起使用时，该属性名称必须是驼峰写法： 您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。</p><p></p><p>可以应用动画的属性：</p><pre><code>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
</code></pre><p></p><p></p></div></div></div><p><br /></p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-531cc7698520aa0d9444bb3d6b91feba5" aria-expanded="true"><div class="accordion-toggle"><span style="">speed</span><br />
<i class="pull-right fontello icon-fw fontello-angle-right"></i></div></div><div class="panel-body collapse-panel-body"><div id="collapse-531cc7698520aa0d9444bb3d6b91feba5" class="collapse collapse-content"><p></p><p><br />可选。规定动画的速度。<br />可能的值：</p><p></p><p>毫秒<br />"slow"<br />"fast"<br /></p><p></p></div></div></div><p><br /></p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-da41622511c76498843eb1860e8acd2b22" aria-expanded="true"><div class="accordion-toggle"><span style="">easing</span><br />
<i class="pull-right fontello icon-fw fontello-angle-right"></i></div></div><div class="panel-body collapse-panel-body"><div id="collapse-da41622511c76498843eb1860e8acd2b22" class="collapse collapse-content"><p></p><p><br />可选。规定在动画的不同点中元素的速度。默认值是 "swing"。<br />可能的值：</p><p></p><p>"swing" - 在开头/结尾移动慢，在中间移动快<br />"linear" - 匀速移动<br /></p><p></p></div></div></div><p><br /></p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9468e218336f4bb7f4fcc7588b93faeb87" aria-expanded="true"><div class="accordion-toggle"><span style="">callback</span><br />
<i class="pull-right fontello icon-fw fontello-angle-right"></i></div></div><div class="panel-body collapse-panel-body"><div id="collapse-9468e218336f4bb7f4fcc7588b93faeb87" class="collapse collapse-content"><p></p><p><br />可选。animate 函数执行完之后，要执行的函数。<br /></p><p></p></div></div></div><p><br />实例:</p><p></p><pre><code><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .cont {
            width: 100%;
            height: 200px;
            position: fixed;
            bottom: 0;
        }
        
        .a {
            width: 100%;
            height: 200px;
            background: #1e2939;
            text-align: center;
            position: absolute;
        }
        
        .a p {
            font-size: 50px;
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translate(-50%);
            cursor: pointer
        }
        
        .b {
            width: 150px;
            height: 150px;
            position: absolute;
            top: 10px;
            left: -150px;
            background-color: aqua
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function() {
            let w = document.body.offsetWidth
            $('.a p').click(function() {
                $(this).parent().animate({
                    'left': -w + 'px'
                }, 3000, function() {
                    $('.b').animate({
                        'left': '0px'
                    }, 2000);
                });
            });
            $('.b').click(function() {
                $(this).animate({
                    'left': '-150px'
                }, 2000, function() {
                    $('.a').animate({
                        'left': '0'
                    }, 3000)
                })
            })

});
    </script>
</head>

<body>
    <div class="cont"><div class="a"><p>&times;</p></div><div class="b"></div></div>
</body>

</html></code></pre><p><img src="https://www.xxhzm.cn/usr/uploads/2021/09/3306686027.gif" alt="实例.gif" title="实例.gif" style="" data-original="https://www.xxhzm.cn/usr/uploads/2021/09/3306686027.gif" class="aligncenter"style=""></p>