【JQuery】animate()

最新推荐文章于 2022-05-19 08:46:53 发布

badlyForPapers

最新推荐文章于 2022-05-19 08:46:53 发布

阅读量655

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/happyhaojie/article/details/51045142

版权

jQuery 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

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

CSS 属性集是什么意思呢？待会看了例子就很容易理解啦。

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

只有数字值可创建动画（比如 "margin:30px"）。

字符串值无法创建动画（比如 "background-color:red"）。

方式：

<span style="font-family:Times New Roman;font-size:12px;">$(selector).animate({styles},speed,callback)</span>

需要注意的是styles中的属性：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"），其他类似。

例子：

<span style="font-family:Times New Roman;font-size:12px;">    <body>
        <h3>制作简单的动画效果</h3>
        <span></span>
        <div id="tip"></div> 
        
        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    width: "80px",
                    height: "80px"
                },
                3000, function () {
                    $("#tip").html("执行完成!");
                });
            });
        </script>
    </body></span>

span
{
    float:left;
    border: solid 1px #ccc;
    margin: 0px 8px;
    background-color: Blue;
    color:White;
    vertical-align:middle
}

应用一、用来移动位置。

在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。

    <body>
        <h3>制作移动位置的动画</h3>
        <span></span>
        <div id="tip"></div>
        
        <script type="text/javascript"> 
            $(function () {
                $("span").animate({
                    left: "+=100px"  
                }, 3000, function () { 
                    $(this).animate({
                        height: '+=30px',
                        width: '+=30px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
            });
        </script>
    </body>