jQuery 效果 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>this is p</p>
        <button type="button" id="btn1">btn1</button>
        <button type="button" id="btn2">btn2</button>
        <button type="button" id="btn3">btn3</button>
        <div id="div1">
            this is div1;
        </div>
        <button type="button" id="btn4">btn4</button>
        <button type="button" id="btn5">btn5</button>
        <button type="button" id="btn6">btn6</button>
        <button type="button" id="btn7">btn7</button>
        
        <button type="button" id="btn8">click here</button>
        <div id="div2">
            jQuery 滑动方法可使元素上下滑动。
        </div>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jQ_function.js"></script>
    </body>
</html>
$(document).ready(function(){
    $("#btn1").click(function(){
        //hide(speed,callback) speed有slow/fast/毫秒
        $("p").hide("slow")
    });
    $("#btn2").click(function(){
        $("p").show("fast");
    });
    //hide和show重复
    $("#btn3").click(function(){
        $("p").toggle("slow");
    });
    //淡入淡出
        //淡入
        $("#btn4").click(function(){
            $("div").fadeIn("slow");
        });
        //淡出
        $("#btn5").click(function(){
            $("div").fadeOut("slow");
        });
        //重复
        $("#btn6").click(function(){
            $("div").fadeToggle("slow");
        });
        //改变淡出透明度 fadeTo(speed,opacity,callback)
        $("#btn7").click(function(){
            $("div").fadeTo("slow",0.4);
        });
    //滑动效果
        $("#btn8").click(function(){
            //slideUp() slideDown()
            $("#div2").slideToggle("fast");
        })
    
});

 

posted @ 2022-03-28 16:55  lwx_R  阅读(16)  评论(0)    收藏  举报