开发者

-webkit-animation-name: pop in JQuery

开发者 https://www.devze.com 2023-02-02 14:30 出处:网络
I would like to reproduce the effect seen on http://madebyelephant.com/ (only works with a webkit browser) using JQuery.

I would like to reproduce the effect seen on http://madebyelephant.com/ (only works with a webkit browser) using JQuery.

The effect uses:

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

Does anybody know how to reproduce the same pop anim开发者_开发百科ation using JQuery?


Have a look at http://api.jquery.com/animate/ and http://api.jquery.com/category/effects/


pop isn't a standard webkit animation, so they'd have to define it with keyframes in the stylesheet.

Looks like the elephants are scaling and fading in like so:

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

Don't have time to do the jQuery for that right now, but write back if you need help with it.


Try

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

or

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

or 

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

Please be advised that it would not work clean for elements with background images. Apply it directly to images or css styled divs and would work out of the box!

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号