reversing the affect of a 'fade' animation

[gkatz]

Hi;
I have a component I need to perform the folloing on:
1. fade (animation)
2. show (no animation)
3. fade again (animation)
4. show again (no animation)
looking at the sencha source code it seemed like opacity is the style I should change for the 'no animation' part so I did the following:

Ext.Anim.run(Ext.getCmp('id').element, 'fade', {
        out: true,
        autoClear: false
});
Ext.getCmp('id').setStyle('opacity:1;');
Ext.Anim.run(Ext.getCmp('id').element, 'fade', {
        out: true,
        autoClear: false
});
Ext.getCmp('id').setStyle('opacity:1;');

I executed all 4 changes were done with 2 secs between them...
the first setStyle('opacity:1;'); worked like a charm but the last one simply does not work and the element stays with opacity 0...
am I doing something wrong here? I have tried multiple ways of achieving what I described but could not do it.
your help is appreciated
thanks.

[AndreaCammarata]

I'm sorry but it's not clear what you are trying to accomplish.
If you simply want to show / hide a component using the fade animation you can set its

showAnimation: 'fadeIn',
hideAnimation: 'fadeOut'

and simply call the component show() / hide() methods.

[gkatz]

thanks for the tip.however, show and hide are not an option as they affect the layout (and rearrange my page's components).
I still don't understand why my example does not work. here is the full code - very very simple code.
you can paste it into new sencha fiddle (http://new.senchafiddle.com) or see the result here http://api.senchafiddle.com/v3/full/BFtgb/ ). as you will see, the last (4th) function will not make the container reappear and I don't understand why.
thanks

Ext.Loader.setConfig({
    enabled : true
});


Ext.application({
    name : ('SF' || 'SenchaFiddle'),
    
    launch : function() {
        
        Ext.create('Ext.Container', {
            fullscreen : true,
            height:200, width:200,
            style:'background: green;',
            id: 'foo',
            html : 'simple container'
        });
        Ext.Function.defer(function(){
            Ext.Anim.run(Ext.getCmp('foo').element, 'fade', {
                out: true,
                autoClear: false
            });
        },2000);
        
        Ext.Function.defer(function(){
            Ext.getCmp('foo').setStyle('opacity:1;');
        },4000);  
        
        Ext.Function.defer(function(){
            Ext.Anim.run(Ext.getCmp('foo').element, 'fade', {
                out: true,
                autoClear: false
            });
        },6000); 
        
        Ext.Function.defer(function(){
            Ext.getCmp('foo').setStyle('opacity:1;');
        },8000); 
    }
});

[gkatz]

guys I am still unable to solve this simple issue.
can anyone help?
thanks.

[gkatz]

found a solution.
used:
Ext.getCmp('foo').element.setStyle('opacity', '1');
instead of:
Ext.getCmp('foo').setStyle('opacity:1;');

why is the difference?
thanks.