jQuery 的动画效果图片----隐藏打开方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>

</head>
<body>
    <img src="22.jpg" style="display: none">
    <div>
        <input id="show" type="button" value="出现美女">
        <input id="hide" type="button" value="藏起美女">
        <input id="toggle" type="button" value="点击美女">
    </div>
<script>
    $("#show").click(function () {
        $("img").show(5000);
    })
    $("#hide").click(function () {
        $("img").hide(2000);
    })
    $("#toggle").click(function () {
        $("img").toggle(800);
    })

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

此代码中我们首先做了个img标签，放了一张美女图，并先设置display:none

随后设置了3个Input标签，并分别绑定了3个方法 

1，show（）此方法是将绑定的标签里的display：none改为dispaly:inline-block,随后从左上角起往右下角拉升放大，并且透明度由透明0逐渐恢复到1 ，并可以设置参数，1000为一秒钟完成展示整个过程

2，hide（）与上方法相反，display由inline-block改为none，并且收缩图像，透明度由1逐渐变成0.也是可以设置时间参数

3.toggle（）是上面2个方法的集合在一个键上，意思就是判断你的dispaly是什么属性，如果是none 就设置inline-block 如果非none就设置inline-block；

 

posted @ 2017-12-20 23:33  归来仍是少年！  阅读(235)  评论(0)  编辑  收藏  举报