同时调用js函数yui

Question

当前这导致（图像）淡出函数结束，然后淡入函数触发。我需要图像交叉淡入淡出和每个图像的不透明度重叠。我很难得到这份工作。想法？

_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(); 
}, 

Answer 1

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 
});