Using jQuery to get the VH1 Pop Up Video effect?

Question

I hope someone can help me recreate the “VH1 Pop Up video” effect, where the entire bubble is scaled and has an Easing effect at the end.

I have a list with some display: no DIVs are hidden in every element of the list.

I was hoping that when the user clicks on each element of the list, the hidden DIV will grow and refuse, as the first example below. The problem with the first example is that the elements in the requested DIV (in this case: .bubble) do not scale together with the rest of the object, like the second example

if i do this:
$(this).children(".bubble").show(1000, "easeOutBack");
my bubble grows with a nice easyOutBack, but the subelements inside the .bubble don't scale (can 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 beautifully, but I don’t know how to add the Easing effect.

Then I tried this:
$(this).children(".bubble").show('scale', { percent: 100 }, 1000, "easeOutBack" );
but still not a weakening.

Any help would be greatly appreciated.

Answer 1

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); 

Answer 2

How about snapping the zoom effect you already have? Go 120 percent, then go back to 100, making 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);