jQuery总结(一)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .main {
                width: 400px;
                height: 400px;
                border: 1px solid black;
                background-color: #ccc;
            }
            
            .main .div1 {
                width: 200px;
                height: 200px;
                background-color: red;
                margin: 100px;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script>
            $(function(){
                $("button").eq(0).click(function(){
//                  $(".main .div1").hide(500);//
                    $(".main .div1").fadeOut(500);//渐变隐藏
//                  $(".main .div1").slideUp(500);//
                });
                $("button").eq(1).click(function(){
                    $(".main .div1").show(500);
                    $(".main .div1").fadeIn(500);//渐变显示
                });
                $("button").eq(2).click(function(){
                    $(".main .div1").fadeToggle(500);//渐变隐藏显示切换
                });
                $("button").eq(4).click(function(){
                    $(".main .div1").stop();
                    $(".main .div1").css({"margin":"100px","opacity":"1"});//json数据格式
                });
                $("button").eq(3).click(function(){
                    $(".main .div1").animate({"margin":"0px","opacity":"0"},1000,function(){
                        $(".main .div1").animate({"margin-left":"200px","opacity":"1"},1000,function(){
                            $(".main .div1").animate({"margin-top":"200px","opacity":"0"},1000,function(){
                                $(".main .div1").animate({"margin-left":"0px","opacity":"1"},1000,function(){
                                    $(".main .div1").animate({"margin":"100px","opacity":"1"},1000,function(){
                                        
                                    });
                                });
                            });
                        });
                    });
                });
            });
        </script>
    </head>

    <body>
        <button>hidd</button>
        <button>show</button>
        <button>toggle</button>
        <button>creatNewButton</button>
        <button>addClick</button>
        <button>stop</button>
        <div class="main">
            <div class="div1">![](haizeiwang/2.png)</div>
        </div>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容