zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    python基本数据类型操作
    ansible基本命令及剧本
    ansible模块及语法
    ansible主机组配置及秘钥分发
    ansible简介安装配置
    K8S使用---故障处理
    python脚本案例---备份单个目录
    telnet-server故障
    zabbix故障处理
    网站部署---LAMP环境部署PHP网站
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3065134.html
Copyright © 2011-2022 走看看