jquery dialog box open/close using a transfer effect

I want to be able to close this dialog box and have it transfer to an object

I've tried using this... not luck

close: function() {
    $(this).effect( 'transfer', { to: "#smpb_info_btn", className: "ui-effects-transfer" }, 500 );$(this).re开发者_如何学运维move();
}

Now I'm tring this... still no luck

$PMinfo_Dialog.dialog({
        autoOpen: true,
        height: 250,
        width: 600,
        modal: false,
        draggable: false,
        resizable: false,
        hide:{
             effect:"transfer",
             options:{from: "#smpb_info_btn", className: "ui-effects-transfer"},
             speed:500
             } ,

        close: function() { $(this).remove();},
        });
    $PMinfo_Dialog.dialog( "open" );

This working jsFiddle demo should be what you need:

HTML:

<div id="PMinfo">Hello</div>

<button id="smpb_info_btn">Info</button>

CSS:

.ui-effects-transfer { border: 2px dotted gray; } 

JS:

$("#PMinfo").dialog({

    autoOpen: true,
    height: 250,
    width: 600,
    modal: false,
    draggable: false,
    resizable: false,
    beforeClose: function() {

        var $this = $(this);

        $this
            .dialog("widget")
            .effect("transfer", {

                to: "#smpb_info_btn",
                className: "ui-effects-transfer"

            }, 500, function() {

                $this.remove();

            });

    }

});