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

Question

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

У меня есть список с некоторым дисплеем: ни один DIVs не скрыт в каждом элементе списка.

Я надеялся, что когда пользователь нажимает на каждый элемент списка, скрытый 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);
пузырь и его содержимое масштабируются красиво, но я не знаю как добавить эффект Easing.

Затем я попытался это:
$(this).children(".bubble").show('scale', { percent: 100 }, 1000, "easeOutBack");
, но до сих пор не ослабевает.

Любая помощь будет высоко оценена.

Answer 1

Из быстрого jsFiddle, похоже, вы можете добавить свойство easing к вашему объекту options. 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);