How to add a cross fade to UI tabs?

How to add a cross fade to UI tabs?

Hi all

I have set up a tabbed interface using standard UI tab code.

<script type="text/javascript">
$(function() {
$("#tabbedArea").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 6000, 'true')
});
</script>

At the moment the tab that is one display fades out, leaving a white space before the next tab appears.

What I would like to happen is as tab1 fades out, tab 2 fades in - creating a cross fade.

Can anyone tell me how to achieve this?

Thanks in advance