JQuery学习(7)动画

首先 最常用的 hide show

 $(function () {
            $('#spinfo').click(function () {
                if ($(this).text() == '隐藏') {
                    $('#divcontent').hide(2000, function () {
                        $('#spinfo').text('显示');
                        
                    });
                }
                else {
                    $('#divcontent').show(2000, function () {
                        $('#spinfo').text('隐藏');
                    });
                }
            })
        })

slide

 $(function () {
            $('#Button1').bind('click', function () {
                $('img').slideUp(2000);
            })
            $('#Button2').bind('click', function () {
                $('img').slideDown(2000);
            })
            $('#Button3').bind('click', function () {
                $('img').slideToggle(2000);
            })
        })

fade

<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('动画执行完毕');
                });
            })
        })
    </script>

animate

$(function () {
            $('img').click(function () {
                //$('img').css({width:'500px',height:'500px'});
                //$('img').animate({width:'500px',height:'500px'}, 2000);
                $(this).animate({ width: '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 () {
                //$('#spinfo').stop();

                //当一个元素有一个动画队列时，停止的只是当前正在执行的动画，后面的动画还会继续执行
                $('img').stop();
            })
            $('#Button3').click(function () {
                $('img').delay(2000).hide(2000);
            })
        })