-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/animate/和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，可以开箱即用！