Использование JQuery для получения эффекта VH1 "Pop Up Video"?

Question

Я надеюсь, что кто-нибудь может помочь мне воссоздать эффект «VH1 Pop Up video», в котором весь пузырь масштабируется и в конце имеет эффект ослабления.

У меня есть список с некоторым отображением: ни один 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" );
но по-прежнему нет ослабления.

Любая помощь будет принята с благодарностью.

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