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!
精彩评论