图片的效果（淡入淡出。。。。。。）

一时失言乱红尘 2022-06-07 05:20 207阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>下午练习</title>
        <script type="application/javascript" src="jquery.1.12.4.js"></script>
        <script>
    
            $(function () {
                $("#a").click(function () {
                    $("img").fadeIn(2000,function () {
                        alert("图片淡入了")
                    });
                })
                $("#b").click(function () {
                    $("img").fadeOut(2000,function () {
                        alert("图片淡出了")
                    })
                })
                $("#c").click(function () {
                    $("img").slideUp(3000,function () {
                        alert("图片收起来了，隐藏")
                    })
                })
                $("#d").click(function () {
                    $("img").slideDown(3000,function () {
                        alert("图片放下来了，显示")
                    })
                })
                $("#e").click(function () {
                    $("img").slideToggle(3000,function () {
                        alert("显示/隐藏切换了")
                    })
                })
                $("#f").click(function () {
                    $("img").fadeToggle(3000,function () {
                        alert("淡出淡入切换")
                    })
                })
                $("#g").click(function () {
                    $("img").animate({
                        width:"120px",  /*图片的宽和高*/
                        height:"160px",
                        opacity:0.5 /*透明度*/
    
                    },1000,function () {
                        alert("动画结束了")
                    })
                })
                $("#q").click(function () {
                    $("img").hide(2000,function () {
                        alert("图片隐藏了")
                    });       /*图片显示、隐藏的效果  和  淡入，淡出的效果不一样*/
                })
                $("#w").click(function () {
                    $("img").show(2000,function () {
                        alert("图片显示了")
                    })
                })
    
            })
        </script>
    </head>
    <body>
    <button id="a">淡入</button>
    <button id="b">淡出</button>
    <button id="c">更改大小隐藏</button>
    <button id="d">更改大小显示</button>
    <button id="e">更改大小显示隐藏切换</button>
    <button id="f">淡出淡入切换</button>
    <button id="g">自定义动画</button>
    <button id="q">隐藏</button>
    <button id="w">显示</button>
    <center>
        <img src="tup.jpeg" height="200px" width="200px"/>
    </center>
    </body>
    </html>