jQuery的animatie方法-CSDN博客

参数说明

基本参数

propperty: 可以是一群CSS属性，用{}写出来。注意，太短的属性，比如font不会识别，所有要写成font-size这样。值可以为hide,show,toggle。
duration: 过渡的时间,值为数值或者字符。默认是400ms。fast是200ms, slow是600ms。
easing: 缓动方式，一般需要插件扩展，默认的我只知道swing和linear。
complete function: 在过渡时间之后，执行的动作。

现在，可以写一个简单的例子了:

$('#button').click(function() {
    $('.myClass').animate({
        /*移动方向，需要设置position*/
        left: '+=50px',
        height: 'toggle',
        opacity: 0.5
    }, 'slow', 'linear', function() {
        console.log('animate done!');
    });
});

额外参数

animate的另外一种写法：

$().animate({
  /* CSS属性 */
}, {
  /* 额外属性 */
});

把上面的改写下就是：

$('.myClass').animate({
    left: '+=50px',
    height: '100px',
    opacity: 0.5
}, {
    duration: 2000,
    easing: 'linear',
    complete: function() {
        console.log('animate done!');
    }
});

specialEasing: 可以分别指定css属性的easing方式, 也可以在css属性中通过['value', 'easing']写出来。

多个动画顺序播放

使用链式方式写出来，比如：

$('#button').click(function() {
    $('.myClass').animate({
        left: ['+=50px','linear']
    }).animate({
        height: ['+=100px', 'swing']
    });
});

转载于:https://my.oschina.net/leohxj/blog/135939