Grow from center animation with JQuery
animation, jquery
Solution
You can use jQuery UI with the show method passing in "scale" as a parameter.
$('#growwer').show("scale",{}, 1000);
Working example
To slide your element to the center o the page I've created a modified version of Tony L's jQuery function found here: Using jQuery to center a DIV on the screen.
Working Example
Update
Here's a working example of the two animations running simultaniously:
http://jsfiddle.net/wNXLY/1/
To get this to work I included an extra parameter on the `animate` function passing in: `{duration: durationLength, queue: false}`
Problem
I'm looking to have a popup div from a button. When the button is clicked, I want the popup to grow outwards from the center of the button and at the same time, slide to the center of the screen. I don't think this should be too hard but I can't find any snippets anywhere. Any help would be greatly appreciated. Thanks to the help from Jamie Dixon, I got this code working. ``` $('#grower').css({ backgroundColor: '#FFFFFF', border: '10px solid #999', height: '0px', width: '0px', color: '#111111', fontWeight: 'bold', padding: '10px', display: 'none', position: 'absolute', left: $(this).position().left, top: $(this).position().top }).appendTo('#overlay').fadeIn(0).animate({ position: 'absolute', height: '200px', width: '600px', marginTop: '-120px', marginLeft: '-320px', display: "", top: ((($(parent).height() - $(this).outerHeight()) / 2) + $(parent).scrollTop() + "px"), left: ((($(parent).width() - $(this).outerWidth()) / 2) + $(parent).scrollLeft() + "px") }, 1000); ```