Using JQuery to get VH1's "Pop Up Video" effect?

I am hoping someone can help me recreate the "VH1 Pop Up video" effect, where the entire bubble scales, and has the Easing effect at the end.

I have a list with some display:none DIVs hidden in each item of a list.

I was hoping that when user clicks on each list item the hidden DIV would grow and bounce like the first example below. The problem with the first example is that the elements within the requested DIV (in this case: .bubble) don't scale along with the rest of the object, like the second example

if I do this:

$(this).children(".bubble").show(1000, "easeOutBack")开发者_如何学Python;

my bubble grows with a nice easeOutBack, but sub elements within .bubble don't scale (might there be a way to specify "scale this element AND its children"?

if I do this:

$(this).children(".bubble").effect("scale", {origin:['middle','bottom'], from:{width:0,height:0}, percent: 100, direction: 'horizontal' }, 1000);

the bubble and its contents scale nicely, but I don't know how to add the Easing effect.

I then tried this:

$(this).children(".bubble").show('scale', { percent: 100 }, 1000, "easeOutBack" );

but still no easing.

Any help would be much appreciated.

From a quick jsFiddle, it looks like you can add the easing property to your options object. http://jsfiddle.net/bstakes/3RNSS/

$(this).children(".bubble").effect("scale", {
    origin:['middle','bottom'], 
    from:{width:0,height:0}, 
    percent: 100, 
    direction: 'horizontal',
    easing : "easeOutBack" // added easing
}, 1000); 

How about chaining the scale effect you already have? Go to 120 percent, then back to 100, doing the second effect much faster.

$(this).children(".bubble").effect("scale", 
                                   {origin:['middle','bottom'], 
                                    from: {width:0,height:0},
                                    percent: 120,
                                    direction: 'horizontal' },
                                   1000)
                           .effect("scale", 
                                   {origin:['middle','bottom'], 
                                    from: {width:0,height:0},
                                    percent: 100,
                                    direction: 'horizontal' },
                                   200);