自定义动画效果

最新推荐文章于 2022-05-28 23:28:29 发布

CodingBugs

最新推荐文章于 2022-05-28 23:28:29 发布

阅读量329

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_33061377/article/details/52783200

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset="utf-8">
    <script src="bootstrap/js/jquery.min.js"></script>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            left: 50px;
        }
    </style>
</head>
<body>
    <div>
        <h2>animate</h2>
        <p>(params,[speed],[easing],[fn])</p>
        <p>用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 来让元素做相对运动。jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。
        </p>
    </div>
    <div id="div1">div</div>
    <br><br><br><br><br>
    <button id="btn">start</button>
    <h2>jQuery.fx.off = true</h2>
    <p>把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。</p>
    <h2>jQuery.fx.interval = 100</h2>
    <p>设置动画的显示帧速。</p>
    <script>
        $(function(){
            $('#btn').click(function(){
                $('#div1').animate({
                    width: "200",
                    height: "200px",
                    left: "800px",
                    borderWidth: "5px",
                    opacity: "toggle",
                },"show");
            })
        })
    </script>
</body>
</html>

CodingBugs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义动画效果

<!DOCTYPE html><html><head> <title>demo</title> <meta charset="utf-8"> <script src="bootstrap/js/jquery.min.js"></script> <style> #div1{ width: 100px;
复制链接

扫一扫