Using jQuery UI effects when dropping items between tabs

I have a jQuery UI tab control. It contains blocks that can be sorted. They can also be dropped on other tabs. When a block is dropped on another tab, I want to use the slide effect to hide the block from the current tab before displaying it on the new tab.

Here is a demonstration of the problem on jsfiddle (Follow the directions on the jsFiddle link to duplicate the pr开发者_运维知识库oblem)

The jsFiddle demo initially shows a working state for the problem. It uses the standard .hide() method to hide a block. But when using the "slide" effect with hide(), unexpected results occur. The block is not animated. Instead, after the animation interval of 1000ms the block just disappears from the tab and then is placed in an unexpected position on the new tab.

The expected behavior is that the block will slide to the left and be moved from the "Full" tab to the "Empty" tab.