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>

原文地址:https://www.cnblogs.com/duanlinlin/p/3065165.html