4

誰かが「VH1ポップアップビデオ」効果を再現するのを手伝ってくれることを願っています。この効果では、バブル全体が拡大縮小され、最後にイージング効果があります。

いくつかのdisplay：noneDIVがリストの各アイテムに隠されているリストがあります。

ユーザーが各リストアイテムをクリックすると、以下の最初の例のように、非表示のDIVが大きくなり、バウンスすることを期待していました。最初の例の問題は、2番目の例のように、要求されたDIV内の要素（この場合は.bubble）がオブジェクトの残りの部分と一緒にスケーリングされないことです。

これを行う
$(this).children(".bubble").show(1000, "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から、オプションオブジェクトにイージングプロパティを追加できるようです。 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％に戻すと、2番目の効果がはるかに速くなります。

$(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 に答える