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

HTML Code:
<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?

PHP Code:
        init : function() {

            
// ...

            
viewArticle Ext.get('djcs-view-article');
            
viewArticle.on('click'this.hideArticlethis);

            
// ...

            
}); 
PHP Code:
        getArticle : function(gridrowIndexe) {

            
// ...

            // Align and resize article popup with resizeable grid
            
viewArticle.alignTo('djcs-article-grid''tl-tl', [1010]);
            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,
                
useDisplayfalse
            
});

            var 
refs //... REMOVED FOR SECURITY

            
ds_article.load({
                
params: {referencesrefs}
            });
        }, 
PHP Code:
        hideArticle : function() {
            
viewArticle.fadeOut({
                
duration.500,
                
useDisplayfalse
            
});
        }