Question

How come the following code does not cause any fade effects?

var currentTicker =0;
function toggleTicker()
{
   var tickers = Ext.select('#toolbar .x-button').elements;

   if(tickers.length > 1)
   {
      Ext.Anim.run(tickers[currentTicker], 'fade', {out:true});
      currentTicker++;
      if(currentTicker == tickers.length)
              currentTicker = 0;

      Ext.Anim.run(tickers[currentTicker], 'fade', {out:false});
   }

}

I am trying to fade out the previous .x-button and fade in the next .x-button. But none of the .x-buttons are fading in or out. They are always visible. I also don’t have any javascript errors.

What am I doing wrong?

Answer 1

You need to set the autoClear property to false otherwise the faded element reappears

Take a look at my answer to that post

Working Example of Sencha Fade Effect

Here’s the code that works…needs to use autoClear and Ext.get()

var currentTicker = 0;
function toggleTicker()
{
   var tickers = Ext.select('#toolbar .x-button').elements;

   if(tickers.length > 1)
   {
      Ext.Anim.run(Ext.get(tickers[currentTicker].id), 'fade', {out:true, duration:1000, autoClear:false});
      currentTicker++;
      if(currentTicker == tickers.length)
              currentTicker = 0;

      Ext.Anim.run(Ext.get(tickers[currentTicker].id), 'fade', {out:false, duration:1000, autoClear:false});
   }

}