-webkit-animation-name：在JQuery中彈出

Question

我想重現使用JQuery在http://madebyelephant.com/（僅適用於webkit瀏覽器）上看到的效果。

效果用途：

-webkit-animation-name: pop; 
-webkit-animation-duration: .5s; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-timing-function: ease-in; 

是否有人知道如何使用JQuery再現相同的彈出動畫？

Answer 1

看一看和http://api.jquery.com/category/effects/

Answer 2

pop不是一個標準的WebKit的動畫，所以他們不得不在樣式表的關鍵幀定義它。

看起來像大象縮放和像這樣衰落：

@-webkit-keyframes pop { 
    from { 
     -webkit-transform: scale(.1); 
     opacity: 0; 
    } 
    85% { 
     -webkit-transform: scale(1.05); 
     opacity: 1; 
    } 
    to { 
     -webkit-transform: scale(1); 
    } 
} 

沒有時間做的jQuery的，現在，但如果你需要它幫忙寫回。

Answer 3

嘗試

$(this).toggle("scale", { percent: 0 }, 1000); 

or 

$(this).hide("scale", {percent: 700, origin: 'center', fade: 'hide' }, 2000); 

or 

$(this).hide("scale", {}, 1000); 

提醒您，它不會與背景圖像元素的工作乾淨。直接將它應用於圖像或CSS樣式的div，並將開箱即用！