同时调用js函数yui
问题描述:
当前这导致(图像)淡出函数结束,然后淡入函数触发。我需要图像交叉淡入淡出和每个图像的不透明度重叠。我很难得到这份工作。想法?同时调用js函数yui
_initFade: function() {
this._timer = Y.later(this._intervalDuration, this, this._startPeriod, [], false);
},
_startPeriod: function() {
this._timer = Y.later(this._intervalDuration, this, this._fadeOut, [], true);
this._fadeOut();
},
_fadeOut: function(){
var host = this.get('host');
this._animOut.set('node', host._getCurrentBlock());
this._animOut.once('end', this._fadeIn, this);
this._animOut.run();
},
_fadeIn: function(){
var host = this.get('host'),
blocks = host.get('blocks'),
index = host.get('index');
index = host._moveIndex(host._getNextIndex());
var nextBlock = blocks.item(index);
this._transparent(nextBlock);
host.syncUI();
this._animIn.set('node', nextBlock);
this._animIn.run();
},
答
YUI不支持同步运行的多个动画。但看看Y.Anim的“补间”事件。它被称为动画的每一帧。因此,您可以使用动画淡入淡出一个图像,并在补间事件期间调整第二个图像的不透明度。
例如,我使用Tween事件同时动画多个项目:
var someNode = Y.Node.create("<div></div>"); // invisible div to animate
Y.one(document.body).appendChild(someNode);
var anim = new Y.Anim({
node: someNode,
duration: 0.25,
from: { color: 'red' },
to: { color: 'white' }
});
anim.on('tween', function(event){
Y.StyleSheet().set('input.text.error', { backgroundColor: someNode.getStyle('color') });
// other animations
});
有趣。我不一定会在乎他们完全同步寿命,是不是可以同时触发两个动画?即使不同步/ – ndreckshage 2012-08-06 22:51:43
当然,你可以做'var anim1 = new Y.Anim(); anim2 = new Y.Anim(); anim1.run(); anim2.run();”它不会像使用补间事件一样好看。 – 2012-08-07 09:26:03