4

我希望有人可以帮助我重新创建“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}, percent: 100, direction: 'horizontal' }, 1000);
气泡及其内容可以很好地缩放，但我不知道如何添加缓动效果。

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

任何帮助将非常感激。

4

2 回答 2

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);
于 2011-09-28T21:44:24.427 回答
0

如何链接你已经拥有的规模效应？到 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);
于 2011-09-28T21:42:02.023 回答