jQuery基础动画相关

作者: GA_ | 来源:发表于2018-02-01 17:47 被阅读15次
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>jQuery</title>
            <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        </head>
    
        <body>
            <span id="hide">点击隐藏</span>
            <span id="show">点击显示</span>
            <span id="toggle">点击显示/隐藏</span>
            <p>一人 我饮酒醉 醉把佳人成双对 两眼 是独相随 我只求他日能沙下这毒誓 百花 迈 驰骋疆场我求一败[1]
            </p>
            <br />
            <br />
            <br />
            <button id="fadeIn">fadeIn动画</button>
            <button id="fadeOut">fadeOut动画</button>
            <button id="fadeToggle">fadeToggle动画</button>
            <button id="fadeTo">fadeTo动画</button>
            
            <div id="div1" style="width: 100px; height: 100px; background-color: #0000FF;">
                
            </div>
            <div id="div2" style="width: 100px; height: 100px; background-color: #4CAF50;">
                
            </div>
            <div id="div3" style="width: 100px; height: 100px; background-color: #F44336;">
                
            </div>
            
            <br />
            <br />
            <br />
            
            <button id="slideDown">slideDown动画</button>
            <button id="slideUp">slideUp动画</button>
            <button id="slideToggle">slideToggle动画</button>
            <p>一人 我饮酒醉 醉把佳人成双对 两眼 是独相随 我只求他日能沙下这毒誓 百花 迈 驰骋疆场我求一败[1]</p>
            <p>一人 我饮酒醉 醉把佳人成双对 两眼 是独相随 我只求他日能沙下这毒誓 百花 迈 驰骋疆场我求一败[1]</p>
            
            <br />
            <br />
            <br />
            
            <button id="btn_animation">-animation start-</button>
            <button id="btn_stop_animation">-animation stop-</button>
            <div id="p_animation" style="width: 100px; height: 100px; background-color: #F44336; position:absolute;">
                
            </div>
            
            <script>
                // 隐藏 1000是动画执行时间
                $("#hide").click(function() {
                    $("p").hide(1000, function() {
                        alert("p标签隐藏完成")
                    })
                });
                
                // 展示 1000是动画执行时间
                $("#show").click(function() {
                    $("p").show(1000)
                });
                // 展示/隐藏
                $("#toggle").click(function() {
                    $("p").toggle(2000)
                });
                
                // 淡入
                $("#fadeIn").click(function() {
                    $("#div1").fadeIn(1000)
                    $("#div2").fadeIn('slow')
                    $("#div3").fadeIn(3000)
                });
                // 淡出
                $("#fadeOut").click(function() {
                    $("#div1").fadeOut(1000)
                    $("#div2").fadeOut('slow')
                    $("#div3").fadeOut(3000)
                });
                // 淡出/淡入
                $("#fadeToggle").click(function() {
                    $("#div1").fadeToggle(1000)
                    $("#div2").fadeToggle('slow')
                    $("#div3").fadeToggle(3000)
                });
                // 渐变到
                $("#fadeTo").click(function() {
                    $("#div1").fadeTo(1000, 0.2)
                    $("#div2").fadeTo('slow', 0.5)
                    $("#div3").fadeTo(3000, 0.8)
                });
                
                // 收起
                $("#slideDown").click(function() {
                    $("p").slideDown(1000)
                });
                // 展示
                $("#slideUp").click(function() {
                    $("p").slideUp(1000)
                });
                // 收起/展示
                $("#slideToggle").click(function() {
                    $("p").slideToggle(1000)
                });
                
                // 动画
                $("#btn_animation").click(function() {
                    var p = $("#p_animation"); 
                    p.animate({
                        left:'250px',
                        opacity: '0.5',
                        height: '200'
                    }, 4000);;
                    p.animate({
                        left:'0px',
                        opacity: '0.6',
                        height: '100px'
                    });
                    p.animate({
                        left:'200px',
                        opacity: '0.8',
                        height: '300px'
                    }, 2000);
                });
                
                $("#btn_stop_animation").click(function() {
                    var p = $("#p_animation");
                    p.stop();
                });
            </script>
        </body>
    
    </html>
    

    相关文章

      网友评论

        本文标题:jQuery基础动画相关

        本文链接:https://www.haomeiwen.com/subject/offjzxtx.html