Question

currently this is causing the (image) fadeout function to end, and then the fade in function fires. i need the images to crossfade and the opacity of each image to overlap. im having trouble getting this work. thoughts?

_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 doesn’t support multiple animations which run in sync. But have a look at the ‘tween’ event of Y.Anim. It is called for every frame of the animation. So you can fade one image using the animation and adjust the opacity of the second image during the tween event.

For example, I use the tween event to animate multiple items simultaneously:

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