• jQuery中的fadeIn、fadeOut、fadeTo的应用


    <head>
        <title></title>
        <style type="text/css">
        #img1
        {
            400px; height:500px;
            }
        </style>
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('#Button1').bind('click', function () {
                    $('img').fadeOut(2000, function () {
                        $('#Button1').val('哎,没了');    //图片消失
                    });
                })
                $('#Button2').bind('click', function () {
                    $('img').fadeIn(2000, function () {
                        $('#Button2').val('有了');      //图片呈现
                    });
                })
                $('#Button3').bind('click', function () {
                    $('img').fadeTo(2000, 0.3, function () {
                        alert('动画执行完毕');         //图片的透明度
                    });
                })


                $('#Select1').bind('change', function () { //可以是change或者是click事件
                    $('img').fadeTo(1000, $('#Select1 option:selected').val());
                })
            })
        </script>
    </head>
    <body>
    <img src="images/1.jpg" id="img1" />
        <input id="Button1" type="button" value="button" />
        <input id="Button2" type="button" value="button" />
        <input id="Button3" type="button" value="button" />
        <select id="Select1">
            <option>1</option>
            <option>0.1</option>
            <option>0.2</option>
            <option>0.3</option>
            <option>0.4</option>
            <option>0.5</option>
            <option>0.6</option>
            <option>0.7</option>
            <option>0.8</option>
            <option>0.9</option>
            <option>0</option>
        </select>
    </body>

  • 相关阅读:
    Docker学习重点(5)~Docker镜像原理、commit提交镜像
    Docker学习重点(6)~容器数据卷
    Linux安装RocketMQ
    4.1 打包和压缩的概念和区别
    4.3 Linux压缩文件或目录为.zip格式(zip命令)
    3.21 Linux PATH环境变量及作用(初学者必读)
    4.6 Linux解压.gz格式的文件(gunzip命令)
    4.4 Linux解压.zip格式的文件(unzip命令)
    3.18 Linux懒人神器:命令自动补全功能!
    4.5 Linux压缩文件或目录中文件为.gz格式(gzip命令)
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3065134.html
Copyright © 2020-2023  润新知