Fx/Tween

Class: Fx.Tween

Fx.Tween Method: constructor

语法:

var myFx = new Fx.Tween(element, [, options]);

参数:

1. element - (mixed) 元素或元素id 。
2. options - (object, optional) Fx options对象，下面详细描述:

Options

• property - (string) CSS属性，例如'width'，'color'，'font-size'，'border'等，默认为null。

示例:

当单击元素时,高度将变换(event.stop()阻止浏览器的默认行为),用bounce:out变换方程, 使用link:cancle当动画正在进行时,立刻结束当前动画执行新动画,当开始值忽略时,当前值将被应用.

var myFx = new Fx.Tween('myElement', {
    duration: 'long',
    transition: 'bounce:out',
    link: 'cancel',
    property: 'height'
});
 
document.id('myLink').addEvent('click', function(event){
    event.stop();
    myFx.start(40, 100);
});

也可以使用元素的方法:.get('tween')和.set('tween')和tween方法设置tween动画,以下展示使用元素的set方法设置tween动画.

var myElement = document.id('myElement');
myElement.set('tween', {
    duration: 'long',
    transition: 'bounce:out',
    link: 'cancel'
});
 
document.id('myLink').addEvent('click', function(event){
    event.stop();
    myElement.tween('height', 40, 100);
});

Fx.Tween Method: set

语法:

myFx.set(property, value);

参数:

1. property - (string) CSS样式名。
2. value - (mixed) CSS样式值。

返回:

• (object) 当前Fx.Tween实例。

示例:

var myFx = new Fx.Tween(element);
// sets the background color of the element to red:
myFx.set('background-color', '#f00');

Fx.Tween Method: start

语法:

myFx.start([property,] [from,] to);

参数:

1. property - (string, if not in options) css样式名。
2. from - (mixed, optional) css样式起始值。
3. to - (mixed) css样式结束值。

返回:

• (object) 当前Fx.Tween实例。

示例:

var myFx = new Fx.Tween(element);
// transitions the background color of the Element from black to red:
myFx.start('background-color', '#000', '#f00');
// transitions the background color of the Element from its current color to blue:
myFx.start('background-color', '#00f');

Object: Element.Properties

Element Property: tween

Setter:

语法:

el.set('tween'[, options]);

参数:

• options - (object) Fx.Tween选项。

返回:

• (element) 当前元素。

示例:

el.set('tween', {duration: 'long'});
el.tween('color', '#f00');

Getter:

语法:

el.get('tween');

参数:

1. property - (string) Fx.Tween属性参数。

返回:

• (object) 元素内部Fx.Tween实例。

示例:

el.get('tween').start(0);

Type: Element

Element Method: tween

语法:

myElement.tween(property, startValue[, endValue]);

参数:

1. property - (string) 要执行动画的css样式。
2. startValue - (mixed) 样式的开始值。
3. endValue - (mixed) 样式的结束值。

返回:

• (element) 当前元素。

示例:

// transitions the width of 'myElement' from its current width to 100px:
$('myElement').tween('width', '100');
// transitions the height of 'myElement' from 20px to 200px:
$('myElement').tween('height', [20, 200]);
// transitions the border of 'myElement' from its current to '6px solid blue':
$('myElement').tween('border', '6px solid #36f');

Element Method: fade

语法:

myElement.fade([how]);

参数:

1. how - (mixed, optional: defaults to 'toggle') 透明值:
   • 'in'- 淡入透明度到100%.
   • 'out'- 淡出透明度到0%.
   • 'show'- 立即设置透明度到100%.
   • 'hide'- 立即设置透明度到0%.
   • 'toggle'- 如果可见,淡出,如果不可见,淡入.
   • (number)- 0和1之间的一个浮点值,元素将从当前值渐变到此值.

返回:

• 当前元素。

示例:

$('myElement').fade('out'); // fades 'myElement' out.
$('myElement').fade(0.7); // fades 'myElement' to 70% opacity.

Element Method: highlight

语法:

myElement.highlight([start, end]);

参数:

1. start - (string, optional: defaults to '#ff8') 起始色。
2. end - (string, optional: defaults to Element's set background-color) 高亮时的颜色。

注意:

返回:

• (element) 当前元素。

示例:

//immediately changes the background to light blue, then back to its original color (or white):
$('myElement').highlight('#ddf');
 
//immediately changes the background to light blue, then fades to grey:
$('myElement').highlight('#ddf', '#ccc');