• 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>

  • 相关阅读:
    向对象数组中添加新的属性 Jim
    vuecli3.0 postcsspxtoviewport将px转化为vwvh适配/Web 端屏幕适配方案 Jim
    js深拷贝与浅拷贝 Jim
    行业死亡案例汇总(客观记录不做评价)
    wins和linux 系统不同编码格式导致的.py执行问题: bad interpreter: No such or file directory
    Pyhon之类学习1
    How to handle error In $.get()
    sql 修改列名及表名
    程序设计类网站
    数据类型
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3065134.html
Copyright © 2020-2023  润新知