jQuery动画

十二、动画

1.基本

show([s,[e],[fn]]) 显示
hide([s,[e],[fn]]) 隐藏
toggle([s],[e],[fn]) 显示隐藏切换

• 参数均为speed(时间)，easing(方式)，fn

    .box {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }

    <button id="btn">动画</button>
    <div class="box">
        我在执行动画
    </div>

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

    });

 2.滑动

slideDown([s],[e],[fn]) 下滑
slideUp([s,[e],[fn]]) 上滑
slideToggle([s],[e],[fn]) 上下滑切换

 

    //上下滑动
    //var isslide = false;
    $('#btn').click(function () {
        /*if(!isslide) {
            $('.box').slideUp();
            isslide = true;
        }else {
            $('.box').slideDown();
            isslide = false;
        }*/
        $('.box').slideToggle(1000, 'linear', function () {
            console.log('动画完成');
        });
    });

3.淡入淡出

fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]]) 

    //淡入淡出的动画
    $('#btn').click(function () {
//       $('.box').fadeToggle();
        $('.box').fadeTo(1000,.4,'linear', function () {
           console.log('动画完成');
        });
    });

 4.自定义

animate(p,[s],[e],[fn])1.8* params(属性) speed easing fn
stop([c],[j])1.7*
delay(d,[q])
finish([queue])1.9+

    //自定义动画
    //delay是延迟动画
    $('#btn').click(function () {
        $('.box').animate({
            left: '200px'
        }, 1000, 'linear', function () {
           console.log('动画完成');
        }).delay(1000).animate({
            top: '200px'
        }, 1000, 'linear', function () {
            console.log('动画完成');
        });
    });

    /*
    * stop不带参 停止正在运行的动画
    * 代参 false false时与不带参效果相同
    * 1.是否立即清除动画的队列
    * 2.是否停止当前动画 立即完成
    * */

    $('#stop').click(function () {
       $('.box').stop(false, false);
//        $('.box').finish();//所有排队动画的属性跳转到最终值
    });

十三、动画队列

• 动画效果的执行具有先后顺序，称为动画队列。

1. 一组元素上的动画效果

• 当在一个animate()方法中应用多个属性时，动画是同时发生的
• 当以链式的写法应用动画方法时，动画是按照顺序发生的

2. 多组元素上的动画效果

• 默认情况下，动画都是同时发生的
• 当以回调的形式应用动画方式时，动画是按照回调顺序发生的

另外，在动画方法中，要注意其它非动画方法会插队，例如css()方法要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中