javascript - How to tweak jQuery animation for the element to stay in the middle? -
i have jquery mobile page , want animate save button on page lose half of width/height , animate original size.
function animateme() { var originalheight = $("#btnsave").height(); var originalwidth = $("#btnsave").width(); $("#btnsave").animate( {"height": originalheight / 2, "width": originalwidth / 2}, { duration: "fast" } ); $("#btnsave").animate( {"height": originalheight, "width": originalwidth}, { duration: "fast" } ); }
the animation works fine, hoping button collapse middle, instead collapses top/left location (as 1 expect).
how can animate button collapse middle , back?
this better using css3 animation
, scale
transform, instead of relying on jquery's animate
. beside other advantages using css3 animations this, performance should better.
here's rough example, give idea: http://jsfiddle.net/ghinda/8nnes/
Comments
Post a Comment