使用 JQuery 获取 VH1 的“弹出视频”影响？

Question

我希望有人可以帮助我重新创建“VH1 弹出视频”效果，其中整个气泡缩放，并在最后具有缓动效果。

我有一个列表，其中的每个项目中都隐藏着一些 display:none DIV。

我希望当用户单击每个列表项时，隐藏的 DIV 会像下面的第一个示例一样增长和反弹。第一个示例的问题是，请求的 DIV 中的元素（在本例中为：.bubble）不会与对象的其余部分一起缩放，就像第二个示例（

如果我这样做）：
$(this).children(".bubble").show(1000, "easeOutBack");
我的气泡以良好的easeOutBack增长，但.bubble中的子元素无法缩放 （是否有一种方法可以指定“缩放此元素及其子元素”？

如果我这样做：
$(this).children(".bubble").effect("scale", {origin:['middle','bottom'], from:{width:0,height:0},百分比: 100, 方向: '水平' }, 1000);
气泡及其内容很好地缩放，但我不知道如何添加缓动效果。

然后我尝试了这个：
$(this).children(".bubble").show('scale', {%: 100 }, 1000, "easeOutBack" );
但仍然没有缓解。

任何帮助将不胜感激。

Answer 1

从快速的 jsFiddle 来看，您似乎可以将 easing 属性添加到选项对象中。
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

将已有的规模效应串联起来怎么样？转到 120%，然后回到 100，以更快的速度实现第二个效果。

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