下载此JS（未压缩） 14kb 下载成品 (压缩版) 2kb gzipped

How to use

本插件需要jQuery 1.4+的版本支持，仅需要引用本程序的JS文件即可
用 $('...').transition 方法取代 jQuery的 $('...').animate方法来使用此插件. 此方法的语法与jQuery animate.保持一致。

平移 (Translate)

将鼠标移动到范例上来查看效果。

水平移动

$('.box').transition({ x: '90px' });

垂直移动

$('.box').transition({ y: '30px' });

各向移动

$('.box').transition({ x: '200px', y: '20px' });

可用的平移方法

这一方法支持如下的移动方法。 详情可以参考这篇 README文档。

旋转

旋转

$('.box').transition({ rotate: '30deg' });

扭曲

水平扭曲

$('.box').transition({ skewX: '30deg' });

垂直扭曲

$('.box').transition({ skewY: '30deg' });

各向扭曲

$('.box').transition({
    skewX: '30deg',
    skewY: '-30deg'
});

放大

放大到 120%

$('.box').transition({ scale: 1.2 });

水平放大200%，垂直方向放大150%

$('.box').transition({ scale: [2, 1.5] });

3D旋转(仅限Webkit内核浏览器)

你可以使用 rotateX 和 rotateY来实现旋转变换。 而 perspective 属性是可选的，但在rotateX/Y属性后通常应对此属性加以设置。

水平旋转

$('.box').transition({
    perspective: '100px',
    rotateX: '180deg'
});

垂直旋转

$('.box').transition({
    perspective: '100px',
    rotateY: '180deg'
});

3D旋转

$('.box').transition({
    perspective: '100px',
    rotate3d: '1, 1, 0, 180deg'
});

其他属性变换

你可以动画化任意支持的CSS属性。

$.fn.transition 可以用于任意CSS属性

$('.box').transition({
    opacity: 0,
    scale: 1.6
});
$('.box').transition({
    marginLeft: '20px',
    height: '80px'
});

回调

$.fn.transition(options, [duration], [easing], [callback]);
$.fn.transition 与 $.fn.animate 工作方式一致。 你可以传递 duration, easing, and callback参数。

提供回调

$('.box').transition({ x: -100 }, function() {
    $(this).transition({ opacity: 0 });
});

自定义速度

自定义速度 (jQuery 风格)

$('.box').transition({ opacity: 0 }, 'slow');

自定义速度 (毫秒为单位)

$('.box').transition({ opacity: 0 }, 2000);

平移速度渐变效果

只需要给 $.fn.transition函数提供第三个参数即可

线性

$('.box').transition({ x: 330 }, 500, 'linear');

渐入

$('.box').transition({ x: 330 }, 500, 'in');

慢移

$('.box').transition({ x: 330 }, 500, 'ease');

渐出

$('.box').transition({ x: 330 }, 500, 'out');

渐入-渐出

$('.box').transition({ x: 330 }, 500, 'in-out');

快移

$('.box').transition({ x: 330 }, 500, 'snap');

自定义

$('.box').transition({ x: 330 }, 500, 'cubic-bezier(0,0.9,0.3,1)');

延迟

延迟 400ms

$('.box').transition({ x: -100, delay: 400 });

交替使用渐变/延续语法

你可以提供 easing and duration 参数来取代 Great for CoffeeScript.

$('.box').transition({
    x: '100px',
    easing: 'snap',
    duration: '2000ms'
});

可选单位

所有的单位 (px, deg, ms, etc) 是可选的。

$('.box').transition({
    x: 100,
    duration: 2000,
    rotate: 30,
    easing: 'snap'
});

相对单位

此插件兼容jQuery风格的相对单位. 将你的值使用 += or -= 作为开头。

$('.box').transition({
    rotate: '+=30deg',
    x: '+=30'
});

$.fn.css

CSS3 也可以通过 $.fn.css 调用.

$('.box').css({
    x: '90px',
    y: '10px',
    rotate: '-10deg'
});

变换（自动增加前缀）

$('.box').css({ transform: 'rotate(40deg)' });

显示值

$('.box').css({ rotate: '40deg' });
alert($('.box').css('rotate'));
alert($('.box').css('transform'));

设定变换的起始值

通过 $.fn.css ，你可以设定变换的起始值。格式是 “x y”, 其中 x 和 y 是给定的坐标元素。

$('.box').css({ transformOrigin: '10px 10px' });
$('.box').transition({ rotate: 40, scale: 1.2 });

队列化连续动作

插件默认应用了jQuery的 effect queue 特性, 比如说 $.fn.animate 方法。 这意味着这些动作不会同时触发。

$('.box').
    transition({ x: '-40px' }, 250).
    transition({ x: '0px' }, 250).
    transition({ y: '-40px' }, 250).
    transition({ y: '0px' }, 250);

从一种风格过渡到另一种风格

你可以将 css and transition 连接起来使用 (比如.css({ .. }).transition({ .. })) 。

$('.box').
    css({ x: '-800px' }).
    transition({ x: 0 });

浏览器兼容性

关于CSS渐变，请查阅 caniuse.com’s 网站 。为了兼容Mobile Safari浏览器，jQuery使用了 translate3d and scale3d方法。

那老版浏览器呢？

jQuery兼容旧版本浏览器的方法很简单，那就是不渲染渐变效果 (比如rotate, scale, etc) ，但是保留其变化后的效果(例如opacity, marginLeft, etc) 。
同样，延时也被取消了。

回到基于帧的动画

如果在浏览器不支持渐变时候改用传统的基于帧的渐变，同样提供了方法
(一般来说不推荐这么做，因为会降低速度):

// 更改 .transition() 方法为 .animate()
// 如果浏览器不支持渐变方法。
if (!$.support.transition)
    $.fn.transition = $.fn.animate;

设定默认值

// 渐变的默认值与 $.fn.animate. 一样。
$.fx.speeds._default = 300;
// 初始的easing值储存于 $.cssEase.
$.cssEase._default = 'snap';

自定义渐变

在 $.cssEase中改变该值

$.cssEase['bounce'] = 'cubic-bezier(0,1,0.5,1.3)';
$('.box').transition({ x: 0 }, 500, 'bounce');

源代码

查看注释和源码。 还可以在 GitHub上查看反馈

版权

Copyright 2011, Rico Sta. Cruz. Released under the MIT License.

jQuery Transit is authored and maintained by Rico Sta. Cruz with help from it’s contributors. It is sponsored by my startup, Sinefunc, Inc.