change opacity off different layout regions

[andyj]

I have a full page layout with N, S, E, W and center easyui-layout regions.
I have a easyui texteditor in the center region.

I want to programmatically fade the opacity of the whole layout to opacity=0 but keep the Texteditor panel at opacity =1.

It is obviously inheriting the css values.
If I place a panel below the layout, my code works fine.

The layout panel (id=bg1) starts with the style="z-index:1;position:fixed;opacity: 1;"
When triggered it is faded as follows:  $("#bg1").stop().animate({ opacity: 0 }, 5000); // fades to transparent over 5 secs

The easyui-texteditor (id=bg2) starts with the style="z-index:2;position:relative;opacity: 1;"
When the background fade is triggered it is set to remain opaque as follows:  $("#bg2").stop().animate({ opacity: 1 }, 0); // set to fully opaque immediately.

Any clues how to manipulate the css to make the easyui-texteditor box remain visible? Many thanks