• jQuery中图片隐藏效果的所有方法


    <head>
        <title></title>
        <style type="text/css">
            .imgclass
            {           
                300px;
                height: 300px;
                border: solid 1px red;
                position:relative; left:100px; top:100px;
            }
            img
            {
                position:absolute;
                top:10px;
                left:10px;
                height:100px;
                100px;
                }
            td
            {
                300px;
                height:300px;
                }
        </style>
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('img').click(function () {
                    //$('img').css({'500px',height:'500px'});
                    //$('img').animate({'500px',height:'500px'}, 2000);
                    $(this).animate({ '500px' }, 2000).animate({ height: '500px' }, 2000).animate({ left: '+=100px' }, 2000).animate({ top: '-=100px' }, 2000);
                })


                $('#Button1').click(function () {
                    $('#spinfo').animate({ fontSize: '40px' }, 2000);
                })

                $('#Button2').click(function () {
                    $('img').stop();
                })

                $('#Button3').click(function () {
                    $('img').delay(2000).hide(2000);
                })

                $('#Button4').bind('click', function () {
                    $('img').fadeIn(2000, function () {
                        $('#Button4').val("哈哈");
                    })
                })

                $('#Button5').click(function () {
                    $('img').fadeOut(2000, function () {
                        $('#Button5').val("嗯嗯");
                    })
                })
                $('#Button6').click(function () {
                    $('img').fadeTo(2000, 0.5, function () {
                        $('#Button6').val("呵呵");
                    })
                })

                $('#Button7').click(function () {
                    $('img').slideUp(2000);
                })
                $('#Button8').click(function () {
                    $('img').slideDown(2000);
                })
                $('#Button9').click(function () {
                    $('img').slideToggle(2000)
                })
            })
        </script>
    </head>
    <body>
        <input id="Button1" type="button" value="字变大" />
        <input id="Button2" type="button" value="停止" />
        <input id="Button3" type="button" value="延迟" />
        <input id="Button4" type="button" value="fadeIn" />
        <input id="Button5" type="button" value="fadeOut" />
        <input id="Button6" type="button" value="fadeTo" />
        <input id="Button7" type="button" value="上拉" />
        <input id="Button8" type="button" value="下拉" />
        <input id="Button9" type="button" value="自动上拉下拉" />
        <span id="spinfo">好热</span>
        <br />
        <img src="images/1.jpg" class="imgclass" />
    </body>

  • 相关阅读:
    BZOJ3193: [JLOI2013]地形生成
    ARG102E:Stop. Otherwise...
    51NOD1847:奇怪的数学题
    大型大常数多项式模板(已卡常...)
    CF932G Palindrome Partition
    51nod1538:一道难题(常系数线性递推/Cayley-Hamilton定理)
    HTML——meta标签
    HTTP 格式
    Node.js——Async
    设计模式——外观模式
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3065165.html
Copyright © 2020-2023  润新知