jFQury-动画效果

/**
 *      动画效果
 *
 *      1.显示动画效果
 *
 *      hide([slow|normal|fast|number],fun)
 *      show([slow|normal|fast|number],fun)
 *      toggle([slow|normal|fast|number],fun)
 *
 *      2.预制过渡动画
 */
$(function () {

    $('.hide').click(function () {
        $('.box').hide('slow');
    })
    $('.show').click(function () {
        $('.box').show('mnormal');
    })
    $('.toggle').click(function () {
        //$('.box').toggle('fast');
        //设置时间毫秒/回调函数(做一些其他的事情)
        $('.box').toggle(1000,function () {
            alert('完成!');
        });
    })

    $('.show').click(function () {
        $('.box').eq(0).show('fast',function () {
            $('.box').eq(1).show('normal',function () {
                $('.box').eq(2).show('slow',function () {

                });
            });
        });
    })

    $('.show').click(function () {
        $('.box').first().show('fast',function  test() {
            $(this).next().show('fast',test);
        })
    })

    $('.hide').click(function () {
        $('.box').slideDown('fast',function(){
            alert('向下');
        });

    })
    $('.show').click(function () {
        $('.box').slideDown('fast',function(){
            alert('向下');
        });

    })
    $('.toggle').click(function () {
        $('.box').slideDown('fast',function(){
            alert('向下');
        });
    })
    $('.out').click(function () {
        $('.box').fadeOut('fast',function(){
            alert('向下');
        });
        $('.box').fadeIn('fast',function(){
            alert('向下');
        });
        $('.box').fadeToggle('fast',function(){
            alert('向下');
        });

    })

    /*
        自定义动画效果

        1.animate({key:value,key:value},number,fun)
        2.位移效果
        3.组合动画
     */

    //动画效果animate({key:value,key:value},number,fun),number为执行时间,fun为回调函数
    $('.button').click(function () {
        $('.box').animate({
            width:'300px',
            height:'300px',
            fontsize:'50px',
            opacity:0.5
        },1000,function () {
            alert('done');
            }
        )
    })
    //实现每次点击都偏移100px
    $('.button').click(function () {
        $('.box').animate({
            left:'+=100px'
        })
    })
    //函数嵌套实现多种效果
    $('.button').click(function () {
        $('.box').animate({width:'300px'},function () {
            $('.box').animate({height:'300px'},function () {
                $('.box').animate({fontSize:'50px'},function () {
                });
            });
        });
    })
    //通过链式实现多种效果
   $('.button').click(function () {
        $('.box').animate({width:'300px'})
            .animate({height:'300px'})
            .animate({fontSize:'50px'})
            .animate({opacity:0.5});
    })

    //在位移效果中css为优先级最高的,所以会优先执行.为了按顺序执行可以使用queue,
    //如果在使用queue之后如果还想继续执行下面的就需要使用next
    $('.button').click(function () {
        $('.box')
            .slideUp('slow')
            .slideDown('slow')
            //.css({background:'red'})
            .queue(function (next) {
                $(this).css('background','gray');
                next();
            }).hide('slow');
    })
    /**
     *      动画相关的方法
     *      停止动画
     *      stop(clearQueue,gotoEnd)
     *      延时动画
     *      delay()
     */

    $('.button').click(function () {
        $('.box').animate({left:'300px'},1000).delay(2000)
        .animate({top:'300px'},1000)
        .animate({width:'300px'},1000)
        .animate({height:'300px'},1000);
    })
    //停止动画
    $('.stop').click(function () {
        //$('.box').stop();
        //当设置为true时此动画之后的所有动画都不会执行
        $('.box').stop(true);
        //当设置两个true时会直接执行到当前动画结束
        $('.box').stop(true,true);
    })

    //使用 arguments.callee 匿名函数自调用(重复无限次执行)
    $('.button').click(function () {
        $('.box').slideToggle('slow',function () {
            $(this).slideToggle('slow',arguments.callee);
        })
    })
    $('.search').click(function () {
        //选择器选择当前所有的动画
        $(':animated').css('background','gray');
    })
        //
    $('.button').click(function () {
        //参数linear表示线性执行,而swing具有物理效果(慢,快,慢)
        $('.box').animate({left:'300px'},1000,'linear')
    })
})