同時調用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 
});