我想同时给div#w_xxx
和div#w_xxx img
添加动画。
它们应该变大,之后它们应该恢复到原来的宽度和高度。
问题是,mootools同时播放所有动画,所以我看不到动画,我尝试了一些.chain
功能从mootools,但我没有得到它的工作。
我的代码是这样的:
$("w_"+current_item+"").set('morph', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
$("w_"+current_item+"").morph({
'opacity': '1',
'width': 366,
'height': 240,
'z-index': '100'
});
$$("div#w_"+current_item+" img").set('morph', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
$$("div#w_"+current_item+" img").morph({
'opacity': '1',
'width': 366,
'height': 240,
'z-index': '100'
});
$("w_"+current_item+"").set('morph', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
$("w_"+current_item+"").morph({
'opacity': '1',
'width': 183,
'height': 120,
'z-index': '100'
});
$$("div#w_"+current_item+" img").set('morph', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
$$("div#w_"+current_item+" img").morph({
'opacity': '1',
'width': 183,
'height': 120,
'z-index': '100'
});
您应该查看MooTools-more: http://mootools.net/docs/more/Fx/Fx.Elements中的Fx.Elements
,它被设计为在统一的计时器上运行多个动画。
// mock your current_item...
var current_item = 1;
var w = document.id("w_" + current_item);
new Fx.Elements($$(w, w.getElement("img")), {
onComplete: function() {
console.log("done");
},
duration: 4000,
transition: Fx.Transitions.Bounce.easeOut,
link: "chain"
}).start({
0: {
'opacity': '1',
'width': 366,
'height': 240,
'z-index': '100'
},
1: {
'opacity': '1',
'width': 183,
'height': 120,
'z-index': '100'
}
}).start({
0: {
opacity: 0
}
});
同样,它支持link: chain,所以你可以链接东西或等待等。