这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第20讲中看到的最后一个例子一样。
基本用法
使用fx.elements的方法看起来和fx.morph差不多。这两者之间的区别在于.start({})方法和.set({})方法。
为了保证事情简洁，让我们首先建立一个元素数组，以用来传递给fx.elements。
参考代码： [复制代码] [保存代码]
var fxelementsarray = $$('.myelementclass');
现在我们就可以把我们的数组传递给fx.elements对象了。
参考代码：
复制代码 代码如下:
var fxelementsobject = new fx.elements(fxelementsarray, {
// fx选项
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
// fx事件
onstart: function(){
startind.highlight('#c3e608');
}
});
和fx.morph一样，fx.elements扩展了fx类，可以允许你使用fx的全部选项和事件。
.start({})和.set({})方法
要开始一个fx.elements效果，或者使用fx.elements设置样式，你可以像使用fx.tween和fx.morph那样做，不过不是直接把设置直接应用到fx.elements对象上，而是通过索引引用对应的元素——第一个元素是0，第二个是1，以此类推。
参考代码：复制代码 代码如下:
// 你可以用.set({...})来设置样式
fxelementsobject .set({
'0': {
'height': 10,
'width': 10,
'background-color': '#333'
},
'1': {
'width': 10,
'border': '1px dashed #333'
}
});
// 或者用.start({...})创建渐变动画
fxelementsobject .start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87aee1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
就像fx.morph，你可以为元素的渐变动画设定任何一个开始值和结束值，你也可以只设置一个参数（就像我们上面只给宽度设置了一个值），那么这个元素将会从当前值变化到新参数指定的值。
这就是关于fx.elements的全部内容了。可以看看下面的例子，看看它们是怎么使用的。
示例代码
这里我们对两个元素使用了fx.elements。在渐变动画中有几个不同的类型可以选择，同时暂停按钮可以让你暂停动画。
首先，我们来创建我们的元素，我们的可能告知按钮（包括重置（reset）按钮、暂停（pause）按钮和恢复（resume）按钮），还有一些指示器，以便让我们看明白这个过程。
参考代码：
复制代码 代码如下:
onstart
oncancel
oncomplete
onchaincomplete
start a
start b
reset
pause
resume
element 0
element 1
我们的css代码也很简单
参考代码：
复制代码 代码如下:
.ind {
width: 200px;
padding: 10px;
background-color: #87aee1;
font-weight: bold;
border-bottom: 1px solid white;
}
.myelementclass {
height: 50px;
width: 100px;
background-color: #ffffcc;
border: 1px solid #ffffcc;
padding: 20px;
}
#buttons {
margin: 20px 0;
display: block;
}
下面是mootools代码。
参考代码： 复制代码 代码如下:
var startfxelement = function(){
this.start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87aee1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
}
var startfxelementb = function(){
this.start({
'0': {
'width': 500,
'background-color': '#333'
},
'1': {
'width': 500,
'border': '10px solid #dc1e6d'
}
});
}
var setfxelement = function(){
this.set({
'0': {
'height': 50,
'background-color': '#ffffcc',
'width': 100
},
'1': {
'height': 50,
'width': 100,
'border': 'none'
}
});
}
window.addevent('domready', function() {
var fxelementsarray = $$('.myelementclass');
var startind = $('start_ind');
var cancelind = $('cancel_ind');
var completeind = $('complete_ind');
var chaincompleteind = $('chain_complete_ind');
var fxelementsobject = new fx.elements(fxelementsarray, {
//fx options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
//fx events
onstart: function(){
startind.highlight('#c3e608');
},
oncancel: function(){
cancelind.highlight('#c3e608');
},
oncomplete: function(){
completeind.highlight('#c3e608');
},
onchaincomplete: function(){
chaincompleteind.highlight('#c3e608');
}
});
$('fxstart').addevent('click', startfxelement.bind(fxelementsobject));
$('fxstartb').addevent('click', startfxelementb.bind(fxelementsobject));
$('fxset').addevent('click', setfxelement.bind(fxelementsobject));
$('fxpause').addevent('click', function(){
fxelementsobject.pause();
});
$('fxresume').addevent('click', function(){
fxelementsobject.resume();
});
});
更多学习
正如你所看到的，fx.elements非常简单。要更深入地学习，可以仔细地阅读一下fx.elements文档、fx.morph文档和fx文档。
另外，确保阅读过我们关于fx.morph和fx选项及事件的教程。
下载最后一个示例的代码
也包含你开始实践所需要的所有东西。