jQuery动画

jQuery动画

1.显示隐藏动画（不带参数是直接效果）

(1)speed：动画的时间
(2)easing：动画的方式（可用linear，默认swing)
(3)fn：动画完成执行的函数

使用show()和hide():

	var ishow = false;
    $('#btn').click(function () {
        if (!ishow) {
            $('.box').hide();
            ishow = true;
        }
        else {
            $('.box').show();
            ishow = false;
        }
    });

使用toggle():

	$('#btn').click(function () {
        $('.box').toggle();
    });

2.滑动动画

(1)slideDown:使用滑动效果显示隐藏起来的被选元素
(2)slideUp:使用滑动效果隐藏显示出来的被选元素
(3)slideToggle:使用滑动效果（高度变化）来切换元素的可见状态

使用slideUp()和slideDown():

	var isslide = true;
    $('#btn').click(function () {
        if (isslide) {
            $('.box').slideUp(1000);
            isslide = false;
        }
        else {
            $('.box').slideDown(1000);
            isslide = true;
        }
    });

使用slideoggle():

	$('#btn').click(function () {
        $('.box').slideToggle(1000, function () {
            console.log('动画完成');
        })
    });

3.淡入淡出的动画
(1)fadeIn([s],[e],[fn]):使用淡入效果来显示隐藏起来的被选元素
(2)fadeOut([s],[e],[fn])：使用淡出效果来隐藏显示出来的被选元素
(3)fadeTo([[s],o,[e],[fn]])：被选元素的不透明度逐渐地改变为指定的值
(4)fadeToggle([s,[e],[fn]])：在fadeIn()和fadeOut()方法之间切换

使用fadeIn()和fadeOut():

	var isslide = true;
    $('#btn').click(function () {
        if(isslide){
            $('.box').fadeOut(1000);
            isslide=false;
        }
        else{
            $('.box').fadeIn(1000);
            isslide=true;
        }
    });

使用fadeToggle():

	$('#btn').click(function(){
        $('.box').fadeToggle(1000);
    });

使用fadeTo():

	$('#btn').click(function(){
        $('.box').fadeTo(1000, 0.5)
    });

4.自定义动画
(1)animate(p,[s],[e],[fn]):设定动画（动画属性值可以不带px）
(2)stop(stopAll,goToEnd):停止动画
①stopAll:规定是否停止被选元素的所有加入队列的动画
②goToEnd:规定是否允许完成当前的动画(该参数只能在设置了stopAll参数时使用)
(3)finish():完成动画，当前动画停止，不清除队列，直接完成所有队列动画
(4)暂不支持css3

	$('#btn').click(function () {
        $('.box').animate({
            left: 200
        }, 2000, 'linear', function () {
            console.log('动画完成');
        }).delay(1000).animate({//动画队列
            top: 200
        }, 2000, 'linear', function () {
            console.log('动画完成');
        });
    });
    $("#stop").click(function () {
        $('.box').stop(false, false);
        //$('.box').finish();
    });

5.获取动画队列(可以知道当前元素有几个动画队列)

	$('#get').click(function () {
        console.log($('.box').queue());
    });