Mootools 1.3.1:链接动画和动画2个元素同步
问题描述:
我想动画div#w_xxx
和div#w_xxx img
在同一时间。Mootools 1.3.1:链接动画和动画2个元素同步
他们应该变大,之后他们应该达到他们的旧宽度和高度。
问题是,mootools在同一时间播放所有的动画,所以我不能看到动画,我试着从mootools的.chain
函数,但我没有得到它的工作。
我的代码如下所示:
$("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'
});
答
你应该看看Fx.Elements
从MooTools的-更多:http://mootools.net/docs/more/Fx/Fx.Elements,这已被设计为一个统一的定时器运行多个动画。
http://jsfiddle.net/dimitar/tC4V4/
// 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
}
});
同样的道理,它支持链接:链,使您可以链的东西,或等待等
感谢=)与的mootools的备用文件如此令人沮丧,如果你的工作这么多年与jquery –
以及它似乎div和图像没有调整到他们的旧值。我的结构也像
–首先读取旧值,将它们存储到一个对象中并将它们传回:)。顺便说一句,为什么不使用规模转换,如果可用 - 他们会更顺畅。如果不是,则使用mootools。 –