동시에 js 함수를 호출합니다. yui

Question

현재이 (이미지) 페이드 아웃 기능이 종료 된 후 페이드 인 기능이 실행됩니다. crossfade 할 이미지와 각 이미지의 불투명도가 겹칠 필요가 있습니다. 나는이 일을하는 데 어려움을 겪고있다. 생각?

_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의 '트윈'이벤트를 살펴보십시오. 애니메이션의 모든 프레임에 대해 호출됩니다. 따라서 애니메이션을 사용하여 하나의 이미지를 페이드 아웃시키고 트윈 이벤트 중에 두 번째 이미지의 불투명도를 조정할 수 있습니다.

예를 들어, 나는 동시에 여러 항목을 애니메이션 트윈 이벤트를 사용

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