fadeIn/fadeOut only works first time in Internet Explorer 7

[staticboy]

I have a <div> as follows on my page:

<div id="djcs-view-article" style="visibility:hidden;">
    ...
</div>

Elsewhere on the page is a Grid upon which I have set a rowclick listener (the grid is a list of news headlines). The handler is set to populate a second data.Store with the results of a JSON response and to fadeIn() the above <div> (which has been populated with the contents of a news article). The <div> then has a click handler which re-hides it by calling fadeOut().

This all works perfectly in Firefox, but for some reason the fade-in and fade-out effect only accur once in Internet Explorer 7, the first time a headline is clicked and when that article is then closed. Subsequent article views result in the <div> popping in and out of existence instantly with no fade effect?

No errors are being generated in either FireBug or IE. Has anyone else come across this?

        init : function() {

            // ...

            viewArticle = Ext.get('djcs-view-article');
            viewArticle.on('click', this.hideArticle, this);

            // ...

            }); 

        getArticle : function(grid, rowIndex, e) {

            // ...

            // Align and resize article popup with resizeable grid
            viewArticle.alignTo('djcs-article-grid', 'tl-tl', [10, 10]);
            var viewArticle_w = Ext.get('djcs-article-grid').getWidth();
            var viewArticle_h = Ext.get('djcs-article-grid').getHeight();
            viewArticle.setWidth(viewArticle_w);
            viewArticle.setHeight(viewArticle_h);
            viewArticle.fadeIn({
                duration: .250,
                useDisplay: false
            });

            var refs = //... REMOVED FOR SECURITY

            ds_article.load({
                params: {references: refs}
            });
        }, 

        hideArticle : function() {
            viewArticle.fadeOut({
                duration: .500,
                useDisplay: false
            });
        } 

[brian.moeskau]

Not sure if you're still having this issue, but it came up in another thread that referenced this one (http://extjs.com/forum/showthread.php?p=84257).

It appears that IE does not like useDisplay:false for the fade effects. Try switching to useDisplay:true instead. If you need to maintain the element's dimensions you may need to add a wrapping element to make it work.

[mardlucca]

Great stuff, thanks for this man!

My problem was slightly different though, I was trying to toggle (fade in/fade out) an Ext.Element without success in IE 8 (like you said, it worked the first time only). To make it work in IE I had to call "setVisibilityMode(Ext.Element.DISPLAY)" on my element before calling the "toggle" method. This did mess up my layout but I think I can figure something out about that.