JQuery动画

时间：2019-07-13 00:33:27 阅读：90 评论：0 收藏：0 [点我收藏+]

JQuery动画

show()/hide()

$(selector).show(speed,easing,callback)

speed：可选。显示效果的速度。值：毫秒(数字类型，不加引号)、"slow"0.6s、"normal"0.4s、"fast"0.2s
easing：放松，舒缓。为 "swing"（开头结尾慢，中间快；默认值），"linear"匀速移动
|--swing：曲线、摇摆；
|--linear：直线、线性
callback ：show() 方法执行完之后，要执行的函数。

<html>

    <head>
        <meta charset="UTF-8">
        <title>show/hide</title>
        <style>
            img {
                /*默认隐藏*/    
                display: none;
            }
        </style>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("#btn").click(function() {
                    if ($(this).val() == "显示") {
                        $("#pic").show("slow", "swing", function() {
                            $(this).css({
                                "border": "1px solid #ccc",
                                "padding": "5px"
                            });
                        });
                        $(this).val("隐藏")
                    } else {
                        $("#pic").hide("slow", "linear");
                        $(this).val("显示");
                    }
                });
            });
        </script>
    </head>

    <body>
        <p><img src="img/img1.jpg" id="pic" /></p>
        <input type="button" value="显示" id="btn" />
    </body>

</html>

toggle()

结合show()和hide()，参数都一样。用于“切换当前元素的可见状态”： show()→hide()→show()

上例中的两个函数，可以用一个toggle函数替换。

示例“收起菜单”：

技术分享图片

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/cssLMenu.css" />
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("#menu li.lastItem").click(function() {
                    //切换菜单
                    $("#menu li:gt(3):not(:last)").toggle();
                    //切换底部箭头方向
                    $(this).toggleClass("down");
                });
            });
        </script>
    </head>

    <body>
        <div id="menu">
            <ul>
                <li class="title">商品服务分类</li>
                <li><a href="#">运动户外</a></li>
                <li><a href="#">手机数码</a></li>
                <li><a href="#">护肤彩妆</a></li>
                <li><a href="#">鞋包配饰</a></li>
                <li><a href="#">珠宝手表</a></li>
                <li><a href="#">家电办公</a></li>
                <li><a href="#">母婴用品</a></li>
                <li><a href="#">家纺居家</a></li>
                <li class="lastItem"></li>
            </ul>
        </div>
    </body>

</html>

fade淡入淡出

fadeIn()、fadeOut()、fadeToggle()

淡入效果来显示/隐藏被选元素。

$(selector).fadeIn(speed,callback)// fide in: 淡入；渐显

speed，可选。从隐藏到可见的速度。默认为"normal"。可用值和show()一样。

<html>

    <head>
        <meta charset="UTF-8">
        <title>fadeIn()、fadeOut()</title>
        <style>
            img {
                display: none;
            }
        </style>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("#btn").click(function() {
                    if ($(this).val() == "淡入") {
                        // 毫秒
                        // "slow"
                        // "fast"
                        $("#pic").fadeIn("slow", function() {
                            $(this).css({
                                "border": "1px solid #ccc",
                                "padding": "5px"
                            });
                        });
                        $(this).val("淡出");
                    } else {
                        $("#pic").fadeOut(2000);
                        $(this).val("淡入");
                    }
                });
            });
        </script>
    </head>

    <body>
        <p><img src="img/img1.jpg" id="pic" /></p>
        <input type="button" value="淡入" id="btn" />
    </body>

</html>

<html>

    <head>
        <meta charset="UTF-8">
        <title>fadeToggle</title>
        <link rel="stylesheet" href="css/cssLMenu.css" />
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("#menu li.lastItem").click(function() {
                    //切换菜单
                    $("#menu li:gt(4):not(:last)").fadeToggle();
                    //更换底部箭头方向
                    $(this).toggleClass("down");
                });
            });
        </script>
    </head>

    <body>
        <div id="menu">
            <ul>
                <li class="title">商品服务分类</li>
                <li><a href="#">运动户外</a></li>
                <li><a href="#">手机数码</a></li>
                <li><a href="#">护肤彩妆</a></li>
                <li><a href="#">鞋包配饰</a></li>
                <li><a href="#">珠宝手表</a></li>
                <li><a href="#">家电办公</a></li>
                <li><a href="#">母婴用品</a></li>
                <li><a href="#">家纺居家</a></li>
                <li class="lastItem"></li>
            </ul>
        </div>
    </body>

</html>

fadeTo()

将被选元素的“不透明度”逐渐地改变为指定的值。

$(selector).fadeTo(speed,opacity,callback)

speed：同show()
opacity：必需。淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。

<html>

    <head>
        <meta charset="UTF-8">
        <title>fadeTo</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("#sel").change(function() {
                    // opacity:不透明
                    var opacity = $(this).val();
                    $("img").fadeTo(300, opacity);
                });
            });
        </script>
    </head>

    <body>
        <p><img src="img/img1.jpg" /></p>
        <p>
            <select id="sel">
                <option value="0.2">0.2</option>
                <option value="0.4">0.4</option>
                <option value="0.6">0.6</option>
                <option value="0.8">0.8</option>
                <option value="1" selected="selected">1</option>
            </select>
        </p>
    </body>

</html>

slide滑动效果

slideDown()、slideUp()、slideToggle()

<html>

    <head>
        <meta charset="UTF-8">
        <title>slideDown/slideUp/slideToggle</title>
        <link rel="stylesheet" href="css/cssTopMenu.css" />
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $(".secondLi").hover(function() {
                    $(".secondLi ul").slideDown(500);
                }, function() {
                    $(".secondLi ul").slideUp(1000);
                });
                $(".thirdLi").click(function() {
                    // 点击打开二级菜单
                    $(".thirdLi ul").slideToggle(500);
                });
            });
        </script>
    </head>

    <body>
        <div id="menu">
            <ul class="firstMenu">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>|</li>
                <li class="secondLi">鼠标放上打开二级菜单
                    <ul>
                        <li>
                            <a href="#">订单</a>
                        </li>
                        <li>
                            <a href="#">收藏</a>
                        </li>
                    </ul>
                </li>
                <li>|</li>
                <li class="thirdLi">点击打开二级菜单
                    <ul>
                        <li>
                            <a href="#">订单</a>
                        </li>
                        <li>
                            <a href="#">收藏</a>
                        </li>

                    </ul>
                </li>
                <li>|</li>

            </ul>
        </div>
    </body>

</html>

animate()/stop()

通过CSS样式将元素从一个状态改变为另一个状态。
CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）；
字符串值无法创建动画（比如 "background-color:red"）。

$(selector).animate(styles,speed,easing,callback)

<html>

    <head>
        <meta charset="UTF-8">
        <title>animate/stop</title>
        <style>
            img {
                position: relative;
                top: 0px;
                left: 0px;
            }
        </style>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("input[value='START']").click(function() {
                    $("img").animate({
                        "left": "+=200px",
                        "top": "+=200px",
                        "opacity": "0.5"
                    }, 5000);
                    // opacity:从0.0（完全透明）到1.0（完全不透明）
                });
                $("input[value='STOP']").click(function() {
                    // 停止img上正在运行的动画
                    $("img").stop();
                });
            });
        </script>
    </head>

    <body>
        <input type="button" value="START" />
        <input type="button" value="STOP" />
        <br />
        <img src="img/img1.jpg" width="200" />

    </body>

</html>

队列动画——在元素中执行一个以上动画效果。即有多个animate()方法在元素中执行。

? 根据这些animate()方法执行的先后顺序，形成了动画“队列”，产生“队列”后，动画的效果便按“队列”的顺序进行展示。

$(this).animate({}, "slow") //第1列
     .animate({}, "slow") //第2列
     .animate({}, "slow") //第3列
     .animate({}, "slow"); //第4列

<html>

    <head>
        <meta charset="UTF-8">
        <title>队列动画</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("img").click(function() { //div块单击事件
                    $(this).animate({
                            height: 200
                        }, "slow") //第1列
                        .animate({
                            width: 200
                        }, "slow") //第2列
                        .animate({
                            height: 50
                        }, "slow") //第3列
                        .animate({
                            width: 50
                        }, "slow"); //第4列
                });
            });
        </script>
    </head>

    <body>
        <img src="img/img1.jpg" width="50" />
    </body>

</html>

JQuery动画

原文：https://www.cnblogs.com/tigerlion/p/11178760.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)