js显示与隐藏动画效果

1,代码如下

<style type="text/css">
       img{
           display: none ;  /* 图片默认不显示*/
       }
   </style>

<body>
    <p><img src="./550.png" id="pic"/></p>
    <input type="button" value="显示" id="btn"/>
    <script type="text/javascript">
        $(function(){
            $("#btn").click(function(){
                if($(this).val() == "显示"){
                    $("#pic").show("slow",function(){
                        $(this).css({"borther":"1px solid #ccc","padding":"5px"});
                    });
                    $(this).val("隐藏")
                }else{
                    $("#pic").hide("slow");
                    $(this).val("显示");
                }
            });
        });
    </script>
</body>

1.运行效果：按钮“显示”，单击显示出隐藏图片，按钮变“隐藏”，再次单击“隐藏”时图片消失

shou（）方法与hide（）方法的使用

1.shou（）方法的定义和用法：如果被选元素已被隐藏，则显示这些元素，可用参数duration表示动画效果运行时间，如不设置参数，则默认为0，即立刻显示元素

2.hide（）方法的定义和用法：如果被选的元素已被显示，则隐藏该元素。hide方法会动态的改变当前元素的高度、宽度和不透明度，最终隐藏当前元素，其中参数的含义与shou（）方法一致，为页面添加一个“显示”按钮，单击“显示”按钮，将以动画的方式显示图片，再一次单击按钮，图片以动画效果方式隐藏

HTML5 JS部分动画效果代码（显示与隐藏）

HTML5 JS部分动画效果代码（显示与隐藏）

js显示与隐藏动画效果

shou（）方法与hide（）方法的使用