Toggle animation coming from button

Question

I have this code:

$(function(){
    $("#modal-launcher, #modal-background, #modal-close").click(function () {
        $("#modal-content,#modal-background").toggle("slow");
    return false;
    });
});

and this html:

<button id='modal-launcher'>
  Launch Modal Window
</button>

<div id='modal-background'></div>

<div id='modal-content'>
  <button id='modal-close'>Close Modal Window</button>
</div>

Here's a JSFiddle.

Right now, the modal appears in the center when you click the button. Instead, I'd like to have a animation where the modal appears to come from the button "Launch Modal Window" button, and then goes to the center. Is this possible? I'm looking for an example on the web, but I can't find one now, but I'll keep looking.

Is this possible? Thanks for all help!

Answer 1

I guess it depends how much or how little work you want to invest on it, jQuery UI has a default effect for this very scenario, the option is called 'transfer', check it out at http://jqueryui.com/effect/

If jQuery UI is not an option, you can use the buttons http://api.jquery.com/offset/ as the initial/final position for the dialog and animate the opacity, left and top properties of the dialog.