jQuery--jQuery动画、animate

待我称王封你为后i 2022-09-22 04:55 168阅读 0赞

1.隐藏和显示

*  hide()；隐藏 show()；显示
 *  slideDown(), slideUp(): 只会改变元素的高度
 *  fadeIn(), fadeOut(): 只改变元素的透明度
 *  toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的. slideToggle(): 通过高度变化来切换匹配元素的可见性.
 *  fadeTo(): 把不透明度以渐近的方式调整到指定的值(0 – 1 之间).

2.自定义动画

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>animate动画</title>
        <script src="jquery.js"></script>
        <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            position: absolute;
            background:#dda18f;
        }
        </style>
    </head>
    <body>
    <button id="btn">演示</button>
    <div id="content"></div>
    <script>
        $(function(){
            $("#btn").click(function(){
                $("#content").animate({"left":"1000"},800)
                        .animate({"left":"10"},800)
                        .animate({"top":"500"},800)
                        .animate({"top":"100"},800)
                        .animate({"width":"50"},500)
                        .animate({"height":"50"},500)
                        .animate({"opacity":"0"},800,function(){
                            $("#content").slideUp(500);
                        });
            });
        });
    </script>
    </body>
    </html>

3.CSS3动画

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3动画</title>
        <script src="jquery.js"></script>
        <style type="text/css">
            .animated {
                -webkit-animation-duration: 5s;
                -moz-animation-duration: 1s;
                -o-animation-duration: 1s;
                /*设定动画执行事件*/
                animation-duration: 5s;
                -webkit-animation-fill-mode: both;
                -moz-animation-fill-mode: both;
                -o-animation-fill-mode: both;
                animation-fill-mode: both;
            }
    
            .animated.hinge {
                -webkit-animation-duration: 2s;
                -moz-animation-duration: 2s;
                -o-animation-duration: 2s;
                animation-duration: 2s;
            }
            @-webkit-keyframes swing {
                20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
                20% { -webkit-transform: rotate(15deg); }
                40% { -webkit-transform: rotate(-10deg); }
                60% { -webkit-transform: rotate(5deg); }
                80% { -webkit-transform: rotate(-5deg); }
                100% { -webkit-transform: rotate(0deg); }
            }
    
            @-moz-keyframes swing {
                20% { -moz-transform: rotate(15deg); }
                40% { -moz-transform: rotate(-10deg); }
                60% { -moz-transform: rotate(5deg); }
                80% { -moz-transform: rotate(-5deg); }
                100% { -moz-transform: rotate(0deg); }
            }
    
            @-o-keyframes swing {
                20% { -o-transform: rotate(15deg); }
                40% { -o-transform: rotate(-10deg); }
                60% { -o-transform: rotate(5deg); }
                80% { -o-transform: rotate(-5deg); }
                100% { -o-transform: rotate(0deg); }
            }
    
            @keyframes swing {
                20% { transform: rotate(15deg); }
                40% { transform: rotate(-10deg); }
                60% { transform: rotate(5deg); }
                80% { transform: rotate(-5deg); }
                100% { transform: rotate(0deg); }
            }
    
            .animated.swing {
                -webkit-transform-origin: top center;
                -moz-transform-origin: top center;
                -o-transform-origin: top center;
                transform-origin: top center;
                -webkit-animation-name: swing;
                -moz-animation-name: swing;
                -o-animation-name: swing;
                animation-name: swing;
            }
    
            .swing {
                -webkit-transform-origin: top center;
                -moz-transform-origin: top center;
                -o-transform-origin: top center;
                transform-origin: top center;
                -webkit-animation-name: swing;
                -moz-animation-name: swing;
                -o-animation-name: swing;
                animation-name: swing;
            }
            div{
                width: 100px;
                height: 100px;
                background: #6eb3d8;
            }
        </style>
    </head>
    <body>
    <button>swing</button>
    <div class="animated" id="content"></div>
    <script>
    $(function(){
        $("button").click(function(){
            var className = $(this).text().toLowerCase();
            $('#content').addClass(className);
            setTimeout(function(){
                $('#content').removeClass(className);
            },5000);
        });
    });
    </script>
    
    </body>
    </html>