var showFunction = function() {
// 在形变之前初始化所有样式
$$('.hiddenM').setStyles({
'display': 'none',
'opacity': 0,
'background-color': '#fff',
'font-size': '16px'
});
// 在这里开始形变，并指定形变后的样式
this.start({
'display': 'block',
'opacity': 1,
'background-color': '#d3715c',
'font-size': '31px'
});
}
window.addEvent('domready', function() {
var elOneM = $('contentoneM');
var elTwoM = $('contenttwoM');
var elThreeM = $('contentthreeM');
var elFourM = $('contentfourM');
// 创建一个形变对象
elOneM = new Fx.Morph(elOneM, {
link: 'cancel'
});
elTwoM = new Fx.Morph(elTwoM, {
link: 'cancel'
});
elThreeM = new Fx.Morph(elThreeM, {
link: 'cancel'
});
elFourM = new Fx.Morph(elFourM, {
link: 'cancel'
});
$('oneM').addEvent('click', showFunction.bind(elOneM));
$('twoM').addEvent('click', showFunction.bind(elTwoM));
$('threeM').addEvent('click', showFunction.bind(elThreeM));
$('fourM').addEvent('click', showFunction.bind(elFourM));
});
如果我们使用和上面相同的HTML代码，我们将得到类似这样的效果：
One
Two
Three
Four
content for one
content for two
content for three
content for four
注意：如果你快速地点击上面的示例，你将看的会同时出现多个内容区块。从根本上讲，如果showFunction在上一个形变完成之前调用，它将不会隐藏其他的区块内容。要解决这个问题，我们需要打破这一规则，并充分利用Fx.Elements。
代码示例
下面的这个示例和上面的示例差不多，不过当你快速地点击两个tab时，将不会同时出现多个内容div。
参考代码：
复制代码 代码如下:
// 创建一个隐藏所有元素的函数
// 你可以把元素作为参数传递进来
var hideAll = function(fxElementObject){
fxElementObject.set({
'0': {
'display': 'none'
},
'1': {
'display': 'none'
},
'2': {
'display': 'none'
},
'3': {
'display': 'none'
}
});
}
// 这里我们为每个内容区块创建一个函数
var showFunctionOne = function() {
// 首先，调用函数hideAll
// 然后Fx.element对象的引用“this”作为参数传入
hideAll(this);
// 开始相应元素的Fx.element形变动画
this.start({
'0': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
var showFunctionTwo = function() {
hideAll(this);
this.start({
'1': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
var showFunctionThree = function() {
hideAll(this);
this.start({
'2': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
var showFunctionFour = function() {
hideAll(this);
this.start({
'3': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
window.addEvent('domready', function() {
// 建立一个数组来保存Fx.elements
var morphElements = $$('.hiddenMel');
// 创建一个新的Fx.Element对象
var elementEffects = new Fx.Elements(morphElements, {
// 设置"link"选项的值为cancel
link: 'cancel'
});
$('oneMel').addEvent('click', showFunctionOne.bind(elementEffects));
$('twoMel').addEvent('click', showFunctionTwo.bind(elementEffects));
$('threeMel').addEvent('click', showFunctionThree.bind(elementEffects));
$('fourMel').addEvent('click', showFunctionFour.bind(elementEffects));
});
更多学习
这篇教程更多地是复习和应用我们在以前的教程中学些的东西。因此，如果你还么准备好，我们建议你全面阅读相应的文档。这比听起来的会更有趣。如果你是刚接触这个库的，但是一直在学习这一系列的教程，你可能会对你了解的程度非常的惊讶。（Fdream注：这个意思就是说，这一系列的教程中，覆盖的内容还不够全面，因此强烈建议大家仔细阅读全部文档。）
也包含你开始实践所需要的所有东西。