基础动画效果

最新推荐文章于 2022-08-05 17:14:43 发布

CodingBugs

最新推荐文章于 2022-08-05 17:14:43 发布

阅读量210

点赞数

分类专栏： jQuery

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

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset="utf-8">
    <script src="bootstrap/js/jquery.min.js"></script>
    <style>
        #div1{
            background-color: blue;
            width: 200px;
            height: 200px;
        }
        #div2{
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="div1">1</div>
        <div id="div2">2</div>
    </div>
    <button id="btn1" type="button">show/hide</button>
    <button id="btn2" type="button">fadeIn/fadeOut</button>
    <button id="btn3" type="button">fadeTo</button>
    <button id="btn4" type="button">fadeToggle</button>
    <button id="btn5" type="button">slideUp/slideDown</button>
    <button id="btn6" type="button">slideToggle</button>
    <button id="btn7" type="button">toggle</button>
    <button id="btn8" type="button">stop</button>
    <button id="btn9" type="button">delay</button>

    <script>
        $(function(){
            // hide/show([speed],[easing],[fn])     隐藏/显示
            $('#btn1').click(function(){
                $('#div1').hide(1000,'swing',function(){
                    $(this).show(1000,'linear');
                });
            })
            //fadeIn/fadeOut([speed],[easing],[fn])  淡入/淡出
            $('#btn2').click(function(){
                $('#div2').fadeOut(1000,'swing',function(){
                    $(this).fadeIn(1000,'linear');
                });
            })
            //fadeTo([speed],opacity,[easing],[fn])     切换透明度至特定值
            $('#btn3').click(function(){
                $('#div1').fadeTo(1000,0.2,'swing',function(){
                    $(this).fadeTo(1000,0.5,'linear');
                });
            })
            //fadeToggle([speed],[easing],[fn])     淡入淡出切换
            $('#btn4').click(function(){
                $('#div1').fadeToggle(1000,'swing',function(){
                    //do something......
                });
                $('#div2').fadeToggle(1000,'linear');
            })
            //slideUp/slideDown([speed],[easing],[fn])  滑动隐藏/显示
            $('#btn5').click(function(){
                $('#div1').slideUp(5000,'swing',function(){
                    $(this).slideDown(1000,'linear');
                });
            })
            //slideToggle([speed],[easing],[fn])  滑动隐藏显示切换
            $('#btn6').click(function(){
                $('#div1').slideToggle(1000,'swing',function(){
                    // do something......
                });
            })
            //toggle 淡入淡出切换 
            //jquery1.9以后的版本取消了toggle(fn1,fn1)
            $('#btn7').click(function(){
                $('#div1').toggle(2000,'linear',
                    function(){
                        // do something......
                    }
                );
            })  
            //stop 停止动画
            $('#btn8').click(function(){
                $('div').stop();
            })
            //delay   延迟执行
            $('#btn9').click(function(){
                $('#div1').fadeTo(1000,0.2).delay(1000).slideUp(1000);
            })
        })

    </script>
</body>
</html>