jQuery实现图片的隐藏、显示、切换

<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <script src="./jquery-2.2.4.min.js">script>
        <script>    
            $(function() {
                //获取按钮并设置点击事件
                $("button").click(function() {
                    switch($(this).html()) {
                        case "隐藏":
                        $("img").hide(500);
                            break;
                        case "显示":
                        //显示
                        //$("img").show(500);
                        //下来效果显示
                        $("img").slideDown(1000);
                            break;
                        case "切换":
                        //$("img").toggle(500);
                        //渐变效果切换
                        $("img").fadeToggle("slow");
                            break;
                    }
                });
            });
        script>

    head>

    <body>
        <h2 id="hid">jQuery实例:特效h2>
        <button>隐藏button>
        <button>显示button>
        <button>切换button><br/><br/>
        <img src="./images/22.jpg" width="300" />
    body>

html>

jQuery实现图片的隐藏、显示、切换_第1张图片

你可能感兴趣的:(前端,jQuery)